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.
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.
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).
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.
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.
0-2 years experience
2-5 years experience
5-8 years experience
8+ years experience
