React changing body class before component is mounted

Question

I have a login component which when mounted the body must be like below.

<body class="login-page">

I am setting the class name using the useEffect hook like below:

useEffect(
    () => {
        document.body.className = "login-page";
    },
    [],
    () => {
        document.body.className = "";
    }
);

After a user is successfully logged in they are redirected to the dashboard component. The body class set above must be removed before the dashboard component is mounted. The useEffect above is doing that but a user must refresh the page first to see the correct layout of the dashboard component.

How best can I remove the body class after a user is logged in so that the dashboard component's layout is not affected?

score 1 · Accepted Answer · answered Nov 13 '20 at 09:11

It looks like you have an issue in your useEffect hook. The cleanup should be returned from the useEffect like this. Maybe that solves your issue? This should set the className of the body when the component mounts and then remove it when the component unmounts.

useEffect(() => {
  document.body.className = "login-page";
  
  return () => {
    document.body.className = "";
  }
}, []);

Edit: If this doesn't solve your issue you should double check if the component actually is unmounting.

React changing body class before component is mounted

1 Answers1