useEffectと変数スコープの関係整理

useEffectと再レンダリングと変数のスコープ

ReactのuseEffectフックは、副作用を扱うためのものです。これにより、コンポーネントがレンダリングされるたびに特定の操作を実行することができます。

useEffect(() => {
  // ここに副作用を書く
}, [/* 依存性配列 */]);

依存性配列に指定した変数が変更されると、useEffect内の関数が再度実行されます。依存性配列が空の場合、useEffect内の関数は初回レンダリング時のみ一度だけ実行されます。

また、useEffect内で定義した変数はそのスコープ内でのみ利用可能です。つまり、useEffect外からアクセスすることはできません。

useEffect内で取得した変数をuseEffect外で使う方法

useEffect内で取得した変数を useEffect外で使うには、useRefで変数を宣言します。

const myRef = useRef();
// この場合 useEffect外であるため、state更新などでページレンダリングがされるたびにnullになってしまうため、useEffect内で取得した値は使えない
// const myValue: string | null = null
useEffect(() => {
  const myVariable = "取得した値";
  myRef.current = myVariable;
}, []);

useRef はミュータブルな値を保持し、その値はレンダリング間で持続します。したがって、最新の値を安全に参照することができます。

useRefについて

useRef は少し抽象的な印象を受けるが、再レンダリング時に変数が全て初期化されてしまう(scriptが上から順番に実行される)宿命から、逃れるために使われる、と覚えると、概念をとらえやすいと思われます。