What happens when a react component returns null or renders null?

When a React component returns null, React unmounts the component from the DOM, but the component instance itself is preserved in memory, allowing its state and lifecycle methods to be re-used if it is rendered again later.

When a component returns null, React instructs the reconciler to not render anything in the DOM for that component, and it unmounts its previously rendered subtree. However, crucially, the component's instance is not permanently destroyed. React keeps it alive, preserving its internal state and hooks. If the parent component re-renders and the condition that caused the null is reversed, React will re-use the existing instance, remount its previous subtree, and the component will continue with its preserved state.

Basic Example

1
Hooks Reset: When a component returns null, its internal state and side effects (via useState, useEffect, etc.) are reset when it's later re-rendered. This is because React completely unmounts the component tree, and re-mounting it creates a new instance with fresh initial state.
2
Performance: Returning null is cheap. The component function is still called and its hooks are run, which could have performance implications if the component does heavy work. However, the DOM operations are minimal (removing or not inserting elements).
3
Fragment vs Null: Returning <></> (Fragment) creates an empty DOM node comment, while null creates no DOM node at all. For most layout purposes, the difference is negligible.
4
Use Cases: Common use cases include conditional rendering of components, implementing early returns for error states, and hiding components based on user permissions or data availability.

Difficulty: 3/10

Topics: conditional rendering, component lifecycle, DOM reconciliation

Scenario Questions

0-2 years experience

1
You’re rendering a user profile component that shows a bio only if it exists — you return null when there’s no bio. The layout breaks because the space doesn’t collapse. How would you fix this?
2
In your component, you conditionally return null based on a loading state. Your teammate says the UI flickers. Why might that happen and how do you fix it?
3
You wrote a component that returns null if a user isn’t authenticated. When you test it, the parent container still takes up space. Why isn’t the space removed?

2-5 years experience

1
A feature toggle component returns null when disabled, but now analytics tracking is missing events. How would you debug and fix this without breaking the conditional logic?
2
Your team’s modal component returns null when closed, but sometimes the backdrop stays visible. What’s likely going wrong, and how would you ensure consistent cleanup?
3
We’re seeing performance drops in our list component when items are conditionally rendered as null. Could returning null be the cause? What alternatives would you consider?

5-8 years experience

1
You’re designing a dynamic form builder where fields can be conditionally hidden by rules — returning null is clean, but now form validation and state management are brittle. How would you redesign this to maintain both performance and reliability?
2
Our legacy codebase uses null returns for conditional rendering across 50+ components. We’re migrating to a new design system that expects consistent DOM structure. What’s your migration strategy?
3
A critical dashboard component returns null for empty data states, but users report inconsistent scroll behavior. How would you analyze and resolve this at the layout and rendering pipeline level?

8+ years experience

1
We’re considering removing all null returns in favor of placeholder components to improve accessibility and layout stability, but it increases bundle size and render overhead. How would you evaluate this tradeoff across 200+ components and justify the decision to engineering leadership?
2
Our app uses null returns for feature flags, but now we’re seeing inconsistent hydration on SSR and broken client-side hydration warnings. How would you redesign the rendering strategy to ensure consistency across server and client?
3
We’re building a component library used by 10+ product teams. Returning null is convenient, but teams keep hitting layout and accessibility bugs. How would you enforce a safer pattern without breaking existing usage?

Follow-up Questions

❓What happens if you return null from a component that’s expected to be a direct child of a flex container?
❓How does React’s reconciliation handle null returns compared to returning an empty fragment?
❓Can returning null cause issues with accessibility or screen readers?