Conditional Rendering in React: Patterns You Should Know

Conditional Rendering in React: Patterns You Should Know

Conditional rendering is how you show different UI based on state, props, or conditions. React offers several patterns, each suited to different cases.

The if Statement

For complex logic, compute the result with an if statement before the return, and assign it to a variable. This keeps JSX clean when logic is involved.

The Ternary Operator

For simple either/or rendering inside JSX, use a ternary: condition ? <A /> : <B />. It is concise and readable for two-way choices.

Logical AND

For showing something only when a condition is true, use condition && <Component />. Be careful with falsy values like 0, which will render as 0.

Switch Statements

For multiple mutually exclusive cases, a switch statement before the return is clearer than nested ternaries.

Returning null

A component can return null to render nothing. This is useful when a component should hide itself based on a prop.

Enum Objects

For mapping states to components, an object keyed by state can be cleaner than a switch. Look up the component by state and render it.

The Common Mistake

Using && with a value that might be 0 or an empty string, which renders the falsy value instead of nothing. Be explicit about what you want to show.

The Takeaway

Know the patterns: if for complex logic, ternary for either/or, && for show-if-true, switch for multiple cases, and null to hide. Choose the one that keeps your JSX clearest for each situation.