This error occurs when a React component returns undefined instead of null or a valid JSX element. React requires explicit null returns or valid elements. React 18+ allows undefined, but older versions throw an error.
React components must explicitly return null or a valid JSX element when they have nothing to render. Returning undefined (either implicitly by having no return statement, or explicitly) indicates a missing return value. Before React 18, this was not allowed and would throw an error. The error helps catch bugs where you accidentally forgot a return statement in your component logic. When a component function completes without a return statement (which defaults to undefined in JavaScript), React cannot proceed. Components are expected to return null, a JSX element, or a fragment if they render nothing.
When your component should render nothing, explicitly return null instead of relying on undefined.
// Wrong
function MyComponent({ shouldRender }) {
if (shouldRender) {
return <div>Content</div>;
}
// Missing return or returns undefined
}
// Correct
function MyComponent({ shouldRender }) {
if (shouldRender) {
return <div>Content</div>;
}
return null; // Explicitly return null
}In JSX expressions, use ternary operators with null as the fallback for false conditions.
// Wrong
function Component({ show }) {
return (
<div>
{show && <p>Only shown when true</p>}
{show ? <p>Shown</p> : undefined} {/* undefined causes error */}
</div>
);
}
// Correct
function Component({ show }) {
return (
<div>
{show && <p>Only shown when true</p>}
{show ? <p>Shown</p> : null}
</div>
);
}Ensure every code path in your component returns something valid. Use if/else blocks to cover all cases.
// Wrong - some paths return nothing
function UserCard({ user }) {
if (!user) {
return null;
}
if (user.banned) {
return <div>User is banned</div>;
}
// Missing else: might return undefined
}
// Correct - all paths have returns
function UserCard({ user }) {
if (!user) {
return null;
}
if (user.banned) {
return <div>User is banned</div>;
}
return <div>Welcome, {user.name}</div>;
}The && operator in JSX works well for simple conditionals. It will render nothing if the condition is false (which React treats like null).
// Safe - && operator handles false correctly
function Alert({ message, type }) {
return (
<div>
{type === 'error' && <p className='error'>{message}</p>}
{/* If condition is false, nothing renders */}
</div>
);
}If you're using React 17 or older, upgrade to React 18+ where undefined rendering is allowed. This eliminates this class of error entirely. Check your package.json:
{
"dependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
}If upgrading is not possible, always return null explicitly.
React 18 introduced a significant change: components can now return undefined without throwing an error. Before React 18, the render method had to return a ReactNode (which excludes undefined). However, for compatibility with older versions and for code clarity, returning null is still the recommended practice. The null return communicates intent—'this component should render nothing'—while undefined can occur accidentally. If you're refactoring legacy code or using TypeScript with strict typing, returning null makes the intent explicit and catches more potential bugs.
React Hook useCallback has a missing dependency: 'variable'. Either include it or remove the dependency array react-hooks/exhaustive-deps
React Hook useCallback has a missing dependency
Cannot use private fields in class components without TS support
Cannot use private fields in class components without TS support
Cannot destructure property 'xxx' of 'undefined'
Cannot destructure property of undefined when accessing props
useNavigate() may be used only in the context of a <Router> component.
useNavigate() may be used only in the context of a Router component
Cannot find module or its corresponding type declarations
How to fix "Cannot find module or type declarations" in Vite