useEffectが２回実行される

エラー内容

useEffect を使用してエラー時の表示を実装したところ、エラーの警告が２回表示された

環境

・React: 18.3.1
・chakra ui: 2.10.5
・axios: 1.7.9

原因

React18のStrictModeによって２回実行されることが原因

StrictModeを削除する（非推奨）

StrictModeを削除すれば２回実行されなくなるので原因はこれだが、
本番環境でのバグ検出に役立つため 削除は推奨しない

createRoot(document.getElementById("root")!).render(
-  <StrictMode>
     <App />
-  </StrictMode>
);

useEffect の依存配列を指定する（未解決）

依存配列を指定すると 1回だけ実行されるとあったので試したが、解決しなかった

useEffect(() => getUsers(), [getUsers]);

注意
getUsers が useCallback でメモ化されていることを確認する
していない場合はレンダリングのたびに useEffect が発火する可能性がある

参考

useRef を使う（解決策）

useRefを使い、初回のみ実行されるようにすることで解決した

  const connectionRef = useRef(false);
  useEffect(() => {
    if (!connectionRef.current) {
      getUsers();
      connectionRef.current = true;
    }
  }, []);

解決策は正しいのか？

useRefで 2回の実行を防ぐことで解決したが、これが正しい解決策なのかを考えてみると、少し自信がない。
もっと良い方法があるのではと思うので、今後より良い方法を見つけたら改善したい