Preventing Component Rendering with Null0%
Managing Loading, Error, and Empty States

Preventing Component Rendering with Null

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

Preventing Component Rendering with Null

1. Hiding Components Declaratively

In traditional JavaScript or jQuery, hiding an element meant imperatively mutating the DOM or applying inline styles:

JavaScript
// Imperative DOM hiding
element.style.display = 'none';

In React, if you want a component to render nothing at all, you simply return null from its function. When React encounters a component that returns null, it renders nothing to the real DOM for that component.

JSX
import React from 'react';
 
// Returning null prevents any DOM nodes from being mounted
export default function WarningBanner({ isVisible, message }) {
if (!isVisible) {
return null; // Renders nothing!
}
 
return (
<aside className="warning-banner" role="alert">
<strong>Warning:</strong> {message}
</aside>
);
}

2. Does Returning null Unmount the Component?

Yes. In React's reconciliation lifecycle:

  • If a component was previously rendering markup and on a subsequent update returns null, React unmounts the previous DOM nodes and cleans them up from the browser.
  • Returning null does not prevent lifecycle effects or hooks from running inside that component before the return statement. Any hooks (useState, useEffect) declared above return null execute normally.
JSX
function AutoDismissBanner({ active }) {
// Hooks still execute even if the component returns null below
const [secondsLeft, setSecondsLeft] = useState(5);
 
if (!active) {
return null; // Nothing rendered to DOM
}
 
return <div>Expiring in {secondsLeft}s</div>;
}

3. Returning null vs CSS display: none

Engineers often debate between returning null vs applying CSS display: none:

ConsiderationReturning null (Unmounting)CSS display: none (Hidden DOM)
Real DOM FootprintZero nodes in the DOM treeNode remains in the DOM tree
Memory ConsumptionLowest memory consumptionSlightly higher DOM memory
Internal StateLocal state resets when unmountedPreserves local input/scroll state
Toggle PerformanceSlight reconciliation cost on toggleInstant toggle via CSS class switch
SEO & AccessibilityInvisible to screen readersMay still be traversed if aria not set

Rule of Thumb:

  • Use return null (conditional rendering) for modals, dropdown menus, authentication screens, or large features that should not exist in the DOM when closed.
  • Use CSS hiding (display: none or Tailwind hidden) when you must preserve internal state (like a complex partially-filled form or an active video playback position) while temporarily hiding it visually.
Interactive Quiz

Practice Quiz

Question 1
What should a React component return if it wants to render nothing to the DOM?
Question 2
What happens to a component's local state when it transitions from rendering markup to returning null in conditional rendering?
Question 3
When is using CSS display: none preferable over returning null?
Question 4
Can you call React Hooks above an early return null?
Question 5
What is rendered in the DOM if a component returns undefined?
Next Lesson

Managing Loading, Error, and Empty States

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Logical AND Operator for Inline RenderingManaging Loading, Error, and Empty States

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext