Describe two patterns for conditional rendering in JSX

WHAT THIS TESTS: The interviewer wants to see that you understand React renders are driven by JavaScript control flow, not template syntax. They are checking whether you can distinguish between patterns that improve readability and those that create maintenance debt. Specifically, they care if you know when to extract logic out of JSX versus keeping it inline.

A GOOD ANSWER COVERS: A strong answer presents two distinct patterns and explains when each wins. First, the early return pattern: inside the component body, use a standard if statement to return the Welcome component when isLoggedIn is true, otherwise return the LoginButton. This works best when the two branches are large, structurally different, or when you want to avoid nesting. Second, the inline expression pattern: inside the parent JSX, use a ternary operator like isLoggedIn ? <Welcome /> : <LoginButton />, or use logical AND like isLoggedIn && <Welcome /> for conditional inclusion without an else. The candidate should note that ternaries are preferred when both branches matter, while logical AND is concise but risky with falsy values like zero. Mentioning that these are ordinary JavaScript expressions inside curly braces shows you understand JSX is syntactic sugar.

COMMON WRONG ANSWERS: A red flag is suggesting useState or useEffect to toggle which component shows. That adds unnecessary state and lifecycle complexity when simple props and expressions suffice. Another mistake is nesting multiple ternaries deeply inside JSX, which hurts readability. Returning undefined instead of null from a component can also cause subtle bugs in older React versions, so explicitly returning null is safer when rendering nothing.

LIKELY FOLLOW-UPS: The interviewer might ask how you would handle three or more mutually exclusive states, which pushes you toward an if/else chain or a switch statement rather than nested ternaries. They might also ask about short-circuit pitfalls, such as count && <List /> rendering zero when count is 0, or they might ask how to keep conditional logic testable by extracting it into small helper components.

ONE CONCRETE EXAMPLE: Suppose a Dashboard component receives a user prop. Pattern one would be: if not user, return LoginButton; otherwise return Welcome with the user name. Pattern two would be inside the return statement: user ? Welcome with the user name : LoginButton. If you only wanted to show a notification banner when messages exist, you would write messages length greater than zero AND Banner with count to avoid the zero-render bug.

Source: react.dev