The white screen of death (WSOD) in React refers to a situation where our React application appears to have crashed and only displays a blank white screen. There are a few potential causes for this issue:
Syntax errors: Syntax errors can cause the JSX elements in the application to fail to render. Make sure to check the code for any syntax errors.
Failed network requests: If the application makes network requests to an API and those requests fail, it could cause the application to crash. Make sure to handle failed network requests gracefully by displaying an error message or a fallback UI.
Unhandled exceptions: If an exception is thrown in the code and not caught, it can cause the application to crash. Make sure to add try-catch blocks around code that could throw exceptions.
Infinite loops: An infinite loop in the code can cause the application to hang and appear to be a WSOD. Make sure to check the code for any infinite loops.
Memory leaks: If the application uses too much memory, it can crash. Make sure to optimize your code and use tools like the React profiler to identify and fix any potential memory leaks.
If WSOD is still there after checking for these potential issues, it may be helpful to use the browser’s developer console to try to identify the cause. We can also try using the React developer tools to inspect the component tree and identify issues with the component hierarchy.
A common example of a white screen of death (WSOD) is when we try to access a certain property of an object which is undefined or null.
Consider the following code snippet, and let’s dissect it line by line:
const Project = ({title}) => {const imageName = title.split(" ").join("-").toLowerCase();return(<div><p>{title}</p><img src = {`./assets/${imageName}.jpeg`} alt={title} /></div>)}export default App = () => {return(// title prop is not provided, hence it is null<Project />)}
Line 1: We define a functional React component that accepts a title prop.
Line 2: We perform string operation on the title prop. It replaces the white spaces with dashes, making the title prop lowercase, and finally stores it in a constant imageName. For example, if the title prop contains the string 'Project 1', it will be returned as the string 'project-1'.
Lines 4–9: We define the markup of the component that renders a div element containing a p (paragraph) element and an img (image) element. The paragraph element renders the title prop, and the image element's src attribute uses a template literal to insert the value of imageName into the string.
Lines 12–17: We simply define another React component that renders the Project component. Notice that the prop title is not supplied to the Project component while rendering. This means that the title prop is undefined. You will receive a TypeError (Cannot read properties of undefined (reading 'split') when rendering the Project component, and WSOD will appear.
Consider the following similar example, and let’s dissect the code line by line:
import { useState, useEffect } from 'react';const ExampleComponent = () => {const [data, setData] = useState(null);useEffect(() => {fetch('https://api.example.com/data').then(response => response.json()).then(data => setData(data)).catch(error => console.error(error));}, []);return (<div>{data.address.city}</div>);};export default ExampleComponent;
Line 1: We import the useState and useEffect hooks from the react library.
Line 3: We define a functional React component named ExampleComponent.
Line 4: We create state data using the useState hook. The state is initialized with null.
Lines 6–11: We use the useEffect hook to fetch data from an API and set the data to the state if the API call is successful. Otherwise, it logs the error to the console.
Lines 13–17: We define and return the markup of the component. Note that line 15 renders {data.address.city}. In case of a failed API call, the data state remains null, rendering {data.address.city} will cause a TypeError, and WSOD will appear.