document.body.classList.add/remove not working as expected

February 27, 2023

When I call add(), it only adds the class attribute to the body element, but it doesn’t attach any value to it. Meanwhile, if I manually add the class to the body element and then call remove(), nothing happens

useEffect(() => {
        document.body.classList.add('overflow-hidden')

        return (
            document.body.classList.remove('overflow-hidden')
        )
    }, [])

This is the code currently. I expected the class ‘overflow-hidden’ to be added to the body element when the component is first rendered and I expected the class ‘overflow-hidden’ to be removed from the body element was the component was closed

>Solution :

I think you have issue with the return. it has to return a function and this function will be called when the component is unmounted:

useEffect(() => {
    document.body.classList.add("overflow-hidden");
    return () => {
      document.body.classList.remove("overflow-hidden");
    };
  }, []);