useEffect trong ReactJs

[NunNun]

Chào mn! Mình đang học đến useEffect() trong reactjs thì vướng phải thắc mắc này. Mong nhận được sự giải đáp từ mọi người.

Mình có 2 Component:

export default function App() {
  const [show, setShow] = useState(false)
  return (
    <React.Fragment>
       {show && <Popup />}
       <button id="btn" onClick={() => setShow(!show)}>Toggle</button>
    </React.Fragment>
  )
}


function Popup() {
  useEffect(() => {
    function f(e) {
      console.log(e.target)
    }
    document.addEventListener('click', f)
    return () => {
      document.removeEventListener('click', f)
    }
  }, [])

  return (
    <React.Fragment>
      <h1>Popup!!!</h1>
    </React.Fragment>
  )
}

Theo suy nghĩ của mình thì lần render App đầu tiên, do show = false nên sẽ chỉ hiển thị duy nhất button.

Tiếp theo đó, khi click vào button thì show = true dẫn đến Popup cũng được render. Sau khi Popup render thì sẽ chạy useEffect và gắn sự kiện onClick cho document.

Tuy nhiên vấn đề mình đang gặp phải là ngay vào lần click vào button đầu tiên, khi này Popup vẫn chưa được render nên sự kiện onClick chưa được gắn, thì trong console vẫn hiện ra e.target. Mình đang không hiểu lắm cách code xử lý ở đây. Mong mn giải thích giúp.

Mình có để code ở link: https://codesandbox.io/s/dreamy-christian-1v7eip?file=/src/App.js

[Duy_FA_Tung (Duy “Fa” Tùng)]

Bạn gắn sự kiện click cho document trong component Popup của bạn nhằm mục đích j.
Nếu vì lý do nào thì khi sử dụng useEffect thì truyền thêm props show từ component cha. Chỉ khi show bằng true thì thực hiện code gán event