Conditional Rendering

React uses JavaScript conditions to choose which element tree to return. Prefer branches that make each visible state explicit.

Branch before returning

01function Progress({ loading, error, percent }) {
02  if (loading) return <p>Loading progress…</p>;
03  if (error) return <p role="alert">Progress could not be loaded.</p>;
04  return <p>{percent}% complete</p>;
05}

Early returns work well for loading, error, empty, and permission states.

Inline choices

01<strong>{complete ? "Review course" : "Start learning"}</strong>
02{prerequisite && <p>Recommended first: {prerequisite}</p>}

Use a ternary when both outcomes render something and && when false should render nothing. Avoid long nested ternaries.

Keep this

Model every meaningful UI state, use early returns for major branches, and keep inline conditions short.