How to Render Null in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Rendering nothing in React is a common pattern when you want to conditionally hide components without affecting the DOM structure. As the creator of CoreUI with over 11 years of React development experience, I frequently use null returns in our UI components for features like permission-based rendering, loading states, and error boundaries. When a React component returns null, it renders nothing to the DOM but maintains its place in the component tree.
Return null from a component’s render method or function body to render nothing while keeping the component mounted.
function ConditionalAlert({ show, message, type }) {
// Early return with null
if (!show) return null
return (
<div className={`alert alert-${type}`}>
{message}
</div>
)
}
function UserPermissionWrapper({ userRole, requiredRole, children }) {
// Check permissions
const hasPermission = userRole === 'admin' || userRole === requiredRole
// Return null if no permission
if (!hasPermission) return null
// Render children if permission exists
return <>{children}</>
}
function DataDisplay({ data, isLoading, error }) {
return (
<div>
<ConditionalAlert show={!!error} message={error?.message} type="danger" />
<ConditionalAlert show={isLoading} message="Loading..." type="info" />
<UserPermissionWrapper userRole="admin" requiredRole="viewer">
{data && (
<div className="data-content">
{data.map(item => <div key={item.id}>{item.name}</div>)}
</div>
)}
</UserPermissionWrapper>
</div>
)
}
When a component returns null, React doesn’t render anything to the DOM, but the component remains mounted and its lifecycle methods still run. This is different from conditional rendering with && operator where the component isn’t rendered at all. Returning null is useful for wrapper components, permission gates, or any component that sometimes needs to be invisible. The component’s state and effects continue to work normally.
Best Practice Note:
In CoreUI components, we use null returns extensively for permission-based rendering, responsive components that hide on certain screen sizes, and feature toggles. This pattern provides clean conditional rendering while maintaining component lifecycle and state consistency throughout our admin templates.
