Conditional Rendering

Because components are functions, a plain if statement can pick what to return:

function Greeting({ isLoggedIn }) { if (isLoggedIn) { return <h2>Welcome back!</h2>; } return <h2>Please sign in.</h2>; }

Early returns keep components readable when whole chunks of UI differ — for example, a loading or error state:

if (loading) return <p>Loading…</p>; if (error) return <p>Something went wrong.</p>; return <List items={items} />;