What is conditional rendering in React?

Conditional rendering in React refers to rendering different content based on certain conditions. This can be achieved using JavaScript's conditional statements (if/else) or by using the ternary operator within JSX.

Example: Using Ternary Operator

Difficulty: 3/10

Topics: ternary operator, && short-circuit, null rendering

Scenario Questions

0-2 years experience

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

2-5 years experience

1
We 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
Explain the trade‑offs between using a ternary operator versus logical && for conditionally rendering a large list.
3
During 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
Our 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
We 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
A 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
Our 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
We 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
Discuss 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.

Follow-up Questions

❓What are the performance implications of returning null versus rendering an empty element?
❓How does React decide to re‑render a component when the condition changes?
❓Can you describe a case where using && might produce an unexpected result?