React – How to fix: Consider adding an error boundary to your tree to customize error handling behavior

How to reproduce it

export default function MainPage(): ReactElement {
        ...
        let name = "";
        let initials = "";
        name = userName.split(".")[0] + " " + userName.split(".")[1];
        initials = userName.split(".")[0][0] + userName.split(".")[1][0];
}

Error

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

react-dom.development.js:67 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Solution

It can happen on a simple JavaScript error. Use guards/checkers for the fix.

export default function MainPage(): ReactElement {
        ...
        let name = "";
        let initials = "";

        if (userName !== "") {
            if (userName.includes(".")) {
                name = userName.split(".")[0] + " " + userName.split(".")[1];
                initials = userName.split(".")[0][0] + userName.split(".")[1][0];
            } else {
                name = userName;
                initials = userName[0];
            }
        }

}

• Share on Facebook