What is conditional rendering in React?
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.