Detailed explanation
Conditional rendering in React means choosing which JSX to return or include based on a condition. That condition can depend on props, state, or any value calculated during rendering. For example, a component might show a spinner while data is loading, a list after loading succeeds, and an empty-state message when no records exist. It matters because most interfaces have multiple visual states, and React lets you describe those states directly rather than manually inserting or removing DOM elements.
The main techniques are early returns, the ternary operator, and logical AND (&&). An early return such as `if (loading) return <Spinner />;` works well when the condition controls the entire component output. A ternary such as `{loading ? <Spinner /> : <List items={items} />}` selects between two alternatives inside JSX. Logical AND, such as `{items.length > 0 && <Footer />}`, is useful when you want either an element or nothing. You can also return `null` from a component when it should produce no visible output.
These patterns use normal JavaScript expressions, not a special React conditional syntax. When React renders a component, it evaluates its function and receives the JSX for the current conditions. React then reconciles that output with the previous render and applies the necessary DOM changes. If a conditional branch removes a child component from the tree, that child is unmounted and its local state is discarded. Showing it again mounts a new instance. However, different branches do not automatically mean a remount: React considers component type, position, and keys when preserving identity.
A common interview trap is `{count && <Badge n={count} />}`. JavaScript's && returns an operand, not necessarily a boolean, so when count is zero, the expression returns 0, which React displays. Use `{count !== 0 && <Badge n={count} />}` when the intended rule is to show nonzero counts. Interviewers generally look for correct syntax, readable branching, awareness of this numeric pitfall, and an understanding that rendering decisions must not violate the Rules of Hooks.
Key points to remember
- Conditional rendering selects JSX using conditions derived from props, state, or calculated values.
- Use early returns for whole-component branches and ternaries for two alternatives within JSX.
- Use && for optional content, preferably with an explicitly boolean condition.
- React renders numeric 0, but renders no visible content for null, undefined, or booleans.
- Removing a child unmounts it; preserving its type, position, and key can preserve its state.
Common mistakes candidates make
- Writing `{items.length && <List />}` and accidentally displaying 0 when the array is empty.
- Calling Hooks conditionally or placing them after a conditional early return.
- Nesting many ternaries instead of extracting readable variables, branches, or child components.
Likely follow-up questions
Can we use an if statement directly inside JSX?
No, JSX braces accept expressions, while if is a statement. Use if before the returned JSX, assign JSX to a variable, or use a ternary inside JSX.
How is returning null different from hiding an element with CSS?
Returning null produces no DOM output for that component, while CSS hiding keeps the rendered elements in the DOM. The component returning null can still remain mounted, retain its own state, and run effects; its previously rendered children are removed.
Why must Hooks be called before conditional early returns?
React relies on Hooks being called in the same order on every render. A conditional return before a Hook can change which Hooks execute, so call Hooks at the top level before branching.
Interview tip: Define conditional rendering, demonstrate a ternary and a boolean-guarded && expression, then explain why a numeric zero can appear unexpectedly.