React useEffect hook toggle issue

Question

I confused myself on how useEffect works in React. The following code works, but in the opposite way as it is intended. Instead of the background picture appearing after you check the checkbox, it appears when the checkbox isn't checked, and dissapears when it is checked.

function Beautifier() {
  const [isBeautiful, setIsBeautiful] = React.useState(false);

  React.useEffect(
    function toggleBackground(shouldShow) {
      document.body.classList.toggle('with-bg', shouldShow);
    }
  );
  
function handleChange() {
  setIsBeautiful(!isBeautiful);
} 

  return (
    <label>
      <input type="checkbox" onChange={handleChange} />
      Turn on pretty background
    </label>
  );
}

ReactDOM.render((
  <Beautifier />
), document.querySelector('#root'));

I am pretty sure my issue is that I am lacking a return() => in the useEffect hook, but all the things I could think off did not resolve the issue/or broke the function. Not adding CSS, as that part is working fine.

Answer 1

I appears you've declared toggleBackground twice and don't invoke it. You are also missing a dependency array on the useEffect. I'm assuming you meant to actually call toggleBackground in the useEffect callback. Use the isBeautiful state as the dependency, and pass this to the toggleBackground function.

React.useEffect(() => {
  toggleBackground(isBeautiful);
}, [isBeautiful]);

You should also use a functional state update to toggle the isBeautiful state.

function handleChange() {
  setIsBeautiful(isBeautiful => !isBeautiful);
}