What is conditional rendering in React?
Why Interviewers Ask This
Interviewers use this question to quickly assess whether a candidate has the foundational knowledge required for React.js development. It reveals whether you understand the building blocks that more complex concepts rely on.
Answer
Conditional rendering in React means rendering different UI based on conditions. Several patterns: (1) if/else statements: use in the component body before the return: if (isLoading) return <Spinner />; return <Content />;. (2) Ternary operator: inline in JSX — {isLoggedIn ? <Dashboard /> : <Login />}. (3) Logical AND: render something or nothing — {error && <ErrorMessage error={error} />}. Caution: {count && <Counter />} renders 0 when count is 0 because 0 is falsy but still rendered. Use {count > 0 && ...} or ternary instead. (4) Nullish patterns: return null from a component to render nothing. (5) IIFE or helper functions: for complex logic. (6) Switch statements: for multiple conditions. The ternary operator is the most common pattern for two-branch conditions; logical AND for optional rendering. Keep component JSX readable by extracting complex conditions into variables or helper functions.
Pro Tip
Back up your answer with a specific project or situation. Saying 'In my last React.js project, I used this when...' immediately makes your answer more credible and memorable.