[React] useEffectとイベントハンドラの実行順序について

Question

質問事項

以下の2つの関数の間に，特定の実行順序（例: useEffectに渡した関数が先）はありますでしょうか？
もし存在しない場合，順序を制御する方法はありますでしょうか？

• useEffectに渡した関数
• イベントハンドラ

質問の背景

以下のコードは，refで参照するコンポーネントの外部をクリックするとコンポーネントを閉じる機能を提供するhooksになります．

useEffect内で，windowオブジェクトにclickイベントのイベントハンドラを登録しています．

import { useState, useEffect, useRef } from "react"

export const useCloserWhenClickOutside = () => {
  const ref = useRef(null);
  const [state, setState] = useState(false);

  useEffect(() => {
    console.log('in useEffect')
    const clickOutsideModuleHandler = (e) => {
      console.log('event handler');
      const moduleArea = ref.current;
      if (!state || moduleArea?.contains(e.target)) return;
      setState(false);
    };

    window.addEventListener("click", clickOutsideModuleHandler);
    return () => {
      console.log('unmount')
      window.removeEventListener("click", clickOutsideModuleHandler);
    };
  }, [state, ref]);

  return [state, setState, ref]
}

以下のコードはaタグをクリックするとchildrenを表示し，children以外の部分をクリックするとchildrenを閉じるコンポーネントになっています．

import { useEffect, useState } from "react";

export const ButtonWithPopup = ({ value, children }) => {
 
  const [state, setState, ref] = useCloserWhenClickOutside();
  const onClick = (e) => {
    console.log('open');
    setState((prev) => !prev);
  };

  return (
    <div>
      {" "}
      <a onClick={onClick}>
        {value}
      </a>
      {state && <div　ref={ref}>{children}</div>}
    </div>
  );
};

この時

• react-datepickerというライブラリの DatePickerを子要素とした場合
• そうでない場合

とで，custom hooks内でwindowに登録したclickイベントのハンドラと，useEffectに渡した関数の実行順序が異なる結果となりました．

import DatePicker from "react-datepicker";

export const App = () => {
  return ( 
  <div>
    <ButtonWithPopup value="タイトル1">
         <DatePicker />
      </PopupButton>
      <PopupButton title="メンバー">
         <div>hoge</div>
      </PopupButton>
  </div>
  )
}

実行結果

aタグをクリックし子要素を表示しようとした場合，コンソールにはどのように表示されているかの結果となります．

子要素がDatePickerの場合

1. open（aタグをクリックしたため）
2. unmount (stateがfalseからtrueに変わったため)
3. in useEffect 
4. event handler（custom hooks内で登録したイベントハンドラ）

子要素がDatePickerでない場合

1. open
2. event handler（先に実行される）
3. unmount
4. in useEffect

Comments

[hg7xka2]

clickOutsideModuleHandler内で，
`console.log(ref.current, e.target, state, moduleArea?.contains(e.target));`
を呼び出して値を確認してみました．結果としては`moduleArea?.contains(e.target)`は正しく動いていました．
また，分かったこととしては以下の通りです．

子要素にDatePickerを使わない場合は，
`refで参照しているDOM，クリックしたDOM，false, false`
となりました．一方で，DatePickerを使った場合は，
`refで参照しているDOM，クリックしたDOM，true, false`となりました．

従って，以下の手順になっているためクリックしても表示されないという形でした．

1. aタグをクリックして子要素を表示しようとする．
2. イベントハンドラの実行よりも先にクリーンアップ関数が呼ばれ，**stateがfalseの時のイベントハンドラが消去される**
3. useEffectの再実行が行われ，**stateがtrueの状態でイベントハンドラが登録される**
4. aタグをクリックした時のイベントに反応して，**クリック前に登録されていたイベントハンドラ（2で消去されたもの）**ではなく3の時のイベントハンドラが実行される

Answer 1

直接関係するかどうかはわからないですが、moduleArea?.contains(e.target)が、コンポーネントによっては正しく反応できないことがあります。

Reactにはポータルという仕組みがあって、React上は子要素であるけど、DOMとしては全く別な場所に表示する、ということが可能です。containsというDOMの仕組みでは、Portalで子要素になっているかというReactサイドの基準での判定はできません。