My function is getting malfunctioned after I added UseEffect

Question

I have a dropdown menu that is supposed to open and close when I click on "dropbtn". It is working perfectly but when I add Use effect so that it also closes when somebody clicks anywhere on the screen but after adding useeffect the dropdown menu is not getting closed when I click on "dropbtn". Here is the code:-

import React, { useState, useEffect } from "react";
export default function App() {
  const [listopen, setListopen] = useState(false)
  let Dropdown = () => {
    if (listopen) {
      setListopen(false)

    } else {
      setListopen(true)

    }
  }
  // Close the dropdown if the user clicks outside of it
  useEffect(() => {
    if (listopen) {
      document.addEventListener("mousedown", () => {
        setListopen(false)
      })
    }
  })
  return (
    <main>
      <header>

        <nav>
          <ul>
            <div class="dropdown">
              <li><button class="dropbtn" onClick={() => Dropdown()}  >USD
                <i class="fa fa-caret-down"></i>
              </button></li>
              <div class="dropdown-content" id="myDropdown" style={{ display: listopen === false ? 'none' : 'block' }}>
                <a href="/">Link 1</a>
                <a href="/">Link 2</a>
                <a href="/">Link 3</a>
              </div>
            </div>
          </ul>

        </nav>
      </header>
    </main>
  )
}

Uppercase function names in react is tend to be used for components. `Dropdown` — Mechanic, Oct 22 '22 at 06:22

score 1 · Accepted Answer · answered Oct 22 '22 at 06:23

1

Using useEffect for your case that is closing on click outside is incorrect you should remove that and use this answer Detect click outside React component

answered Oct 22 '22 at 06:23

N.SH

616
7
20

score 1 · Answer 2 · answered Oct 22 '22 at 07:27

Any global event listener should register only one time and should unregistered when you don't need it.

In your case event should listen when you will mount your component and must remove listener when unmount:

useEffect(() => {
  const mousedown = () => {
    setListopen(false)
  };
  document.addEventListener("mousedown", mousedown)

  // unregister mousedown event when unmount
  return () => {
    document.removeEventListener("mousedown", mousedown);
  }
}, [])

In your code useEffect will run on every change, which is reason your code not working.

score 0 · Answer 3 · answered Oct 22 '22 at 06:57

The reason it si not working is because you have not passed any dependency in the useEffect which is why everytime you click on button which calls Dropdown, the state gets updated as expected BUT it causes the code inside the useEffect to run again since state has changed and you have not passed any dependency. You can refer to Detect click outside React component

My function is getting malfunctioned after I added UseEffect

3 Answers3