How to Fix React App White Screen Quickly and Easily

A white screen in a React app usually means a JavaScript error stopped rendering. Check the browser console for errors, fix any broken JSX or missing imports, and ensure your components return valid JSX inside a single parent element.

Why This Happens

A white screen in a React app happens when the app crashes during rendering. This often occurs because of syntax errors, missing imports, or returning invalid JSX. React stops rendering and shows a blank page without any error message on screen, but errors appear in the browser console.

jsx

import React from 'react';

function App() {
  return (
    <>
      <h1>Hello World!</h1>
      <p>This will cause an error because JSX must have one parent element.</p>
    </>
  );
}

export default App;

Output

Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag.

The Fix

Wrap all JSX elements inside a single parent element like a <div> or React fragment <></>. Also, check the browser console for errors and fix any missing imports or typos. This allows React to render the component correctly without crashing.

jsx

import React from 'react';

function App() {
  return (
    <>
      <h1>Hello World!</h1>
      <p>This is fixed by wrapping JSX in a fragment.</p>
    </>
  );
}

export default App;

Output

The app renders a heading 'Hello World!' and a paragraph below it.

Prevention

To avoid white screens, always check your JSX syntax and ensure components return a single parent element. Use a linter like ESLint with React rules to catch errors early. Regularly check the browser console for warnings or errors during development. Also, use error boundaries to catch runtime errors gracefully.

Related Errors

Other errors causing white screens include:

• Missing React import: Forgetting import React from 'react' in older React versions.
• Incorrect component export/import: Using default vs named exports incorrectly.
• Runtime errors: Accessing undefined variables or calling functions that throw errors.

Fix these by checking imports, exports, and using try-catch or error boundaries.

Key Takeaways

Check the browser console for errors to identify the cause of the white screen.

Always wrap JSX elements in a single parent element like a div or fragment.

Use ESLint with React rules to catch syntax errors before running the app.

Use error boundaries to handle runtime errors without crashing the whole app.

Verify all imports and exports are correct and components return valid JSX.