Function firing twice on click in React component

Question

TL/DR: My simple toggle function fires twice when button is clicked.

I'm using useEffect in a React (w/ Next.js) component so that I can target the :root <html> tag for which I need the class to be toggled. The code is the following:

useEffect(() => {
   const toggleMode = () => {
      const root = document.documentElement;
          
      root.classList.toggle("dark");
      console.log("click");
   };

const toggleBtn = document.querySelector("#toggle-btn");

toggleBtn.addEventListener("click", toggleMode);

I have the necessary imports, the code is placed inside the main component function before the return, and there's no errors in the console at all.

The only issue is that the function is fired twice every time the button is clicked and I cannot find any reason why or solutions online.

Would really appreciate your help and please let me know if I'm missing any information.

Cheers!

Why are you binding an event listener in react? But sounds like you have the component more than once on the page? — epascarello, Jun 15 '22 at 18:53
About @epascarello comment. Here is a question [Using document.querySelector in React?](https://stackoverflow.com/questions/59198952/using-document-queryselector-in-react-should-i-use-refs-instead-how) and why are you are using the UseEffect to manage the click? — Jony_23, Jun 15 '22 at 18:57
The component is only used once, but that would make sense. Also, I'm adding an eventListner because I don't yet know of another way to do it, I'm looking at a solution provided which proposes I use states instead @epascarello — Traznix, Jun 15 '22 at 19:18

score 1 · Answer 1 · answered Jun 15 '22 at 19:01

1

I resolved a similar problem in this post: Why does my NextJS Code run multiple times, and how can this be avoided?

Your code should only run once if you disable react strict mode.

answered Jun 15 '22 at 19:01

Aphix

178
1
7

Hi, thanks for the proposed solution but I'm afraid my reactStrictMode was already set to "true" :) based on the answers I got I think I'm not adding the eventListner correctly. – Traznix Jun 15 '22 at 19:16
@Traznix You need to set it to "false" to make it work. Hope this helps :) – Aphix Jun 15 '22 at 19:58

score 1 · Accepted Answer · answered Jun 15 '22 at 19:02

Your problem is coming from registering the event listener in a non-react way.

By registering the listener via

const toggleBtn = document.querySelector("#toggle-btn");

toggleBtn.addEventListener("click", toggleMode);

you are setting up a new listener each time the function is run, even if the DOM is not updated. This could result in multiple listeners being registered and firing simultaneously.

You need to add your listener the react way.

function Component ( props ){
  const [ isFirst, setIsFirst ] = useState( true );
  const [ toggle, setToggle ] = useState( false );
  useEffect(() => {
    if( isFirst ) {
      setIsFirst( false );
      return;
    }

    document.documentElement.classList.toggle("dark");
  }, [ toggle ] );

  return <div>
    <button id="toggle-btn" onClick = { e => setToggle( !toggle ) } />
  </div>
}

Alright, give me a moment to make sense of what is happening. I've only recently started learning/using React :) will come back with an answer in a bit - thanks! — Traznix, Jun 15 '22 at 19:15
Thanks @etchesketch for the solution! It worked right out of the box. I'll take the time to understand how / why it works and do some research on useState. — Traznix, Jun 15 '22 at 19:29

Function firing twice on click in React component

2 Answers2