Early return

Learn to return null or fallback content early from a component.

Early return

The early return pattern checks a condition at the top of the component and exits early if it doesn't hold. Like if (!user) return null;.

This pattern improves readability for complex conditions. Instead of nesting ternaries, you handle conditions one by one and early-return for each.

Early return usually returns null, but it can also return a fallback JSX: if (!user) return <Login />;.

Early return advantage

The biggest advantage of early return is highlighting the happy path. The main logic stays at the bottom; the early returns at the top handle edge cases.

This keeps the code flat: each condition sits on its own line, no nested blocks. It's easy to maintain.

But early returns for every condition can get messy. With more than two or three conditions, consider a helper function.

Exercise LoadingGuard early return

Complete the skeleton. Write a component called LoadingGuard that takes ({ '{ loading }' }) as parameter. If loading === true, early return <p>Loading</p>; otherwise return <p>Ready</p>. Don't forget to export.

Show example solution

function LoadingGuard({ loading }) {
  if (loading === true) return <p>Loading</p>;
  return <p>Ready</p>;
}

export default LoadingGuard;

Test yourself

What does early return return?
- effect
- state
- DOM
- null or fallback JSX
Show answer

null or fallback JSX — Early return usually returns null or fallback JSX.

Early return example

Early return usually returns ____.

Show answer

Early return usually returns null.

Match the early return pattern

if (!user)

Condition
return null

Early exit
return <Login />

Fallback
if (loading)

Another condition

Next lesson: Summary - Conditional rendering

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies