What is conditional rendering in React?

0-2 years experience

1. 1How would you show a loading spinner while data is being fetched and hide it once the data arrives?
2. 2If you receive a boolean prop `isAdmin`, how would you render an admin panel only when it's true?
3. 3What happens if a component's render method returns `null`?

2-5 years experience

1. 1We have a component that sometimes receives an array of items and sometimes null, and it currently crashes. Walk me through how you'd guard the rendering and why the crash occurs.
2. 2Explain the trade‑offs between using a ternary operator versus logical && for conditionally rendering a large list.
3. 3During a code review you notice a component re‑renders unnecessarily because a conditional block creates a new function each render. How would you fix it?

5-8 years experience

1. 1Our dashboard renders dozens of widgets, each conditionally displayed based on user permissions fetched from an API. How would you design the conditional rendering to minimize performance impact and avoid prop‑drilling?
2. 2We need to implement feature flags across many components without littering each component with `if (flag)`. Describe a pattern you’d use and its implications for bundle size and testing.
3. 3A component uses many nested ternary expressions, making the JSX hard to read. How would you refactor it while preserving behavior and ensuring type safety?

8+ years experience

1. 1Our product is migrating from a legacy class‑based codebase to functional components with hooks. The legacy code uses many `if` statements inside `render`. What strategy would you propose for systematically replacing those with modern conditional rendering patterns, considering backward compatibility and team adoption?
2. 2We plan to introduce a global theming system that conditionally renders different UI trees based on theme and locale. How would you architect this to keep the codebase maintainable across multiple teams and avoid duplication?
3. 3Discuss the long‑term maintenance implications of using inline conditional logic versus a dedicated rendering abstraction (e.g., higher‑order component or render prop) in a large‑scale application.