callback形式refってちょっときになるやつをやってみる

hooks React useRef

概要

React hooksのドキュメントを眺めていたら、ちょっと気ななるuseRefの使い方が書かれていた。
いつどんな状況で使えるのかも含めて書いていく。

なにをしたいやつか

リファレンスを見ている限り、refで指定しているコンポーネントがマウントされたタイミングで実行できる関数をrefに書くことができるように見えた。

export default function App() {
  const callbackref = useCallback(() => console.log("appのref"), []);
  return <div ref={callbackref} className="App" />;
}

// appのref

再レンダリングされたとき

再レンダリングされたときは、もう一回関数が実行されるか試してみる。
予想：実行される

export default function App() {
  // 再レンダリング用
  const [state, setState] = useState(false);
  const toggleState = useCallback(() => setState(!state), [state]);
  console.log({ state });

  const callbackref = useCallback(() => console.log("appのref"), []);
  return (
    <div ref={callbackref} className="App">
      <button onClick={toggleState}>toggle</button>
    </div>
  );
}

予想と違って、初回のレンダリングときだけ処理されるようだ。

子ノードにも持たせてみる

子のノードにもcallbackrefを渡したときはどんな順番で処理されるのか見てみる
予想：親→子の順番

export default function App() {
  // 再レンダリング用
  const [state, setState] = useState(false);
  const toggleState = useCallback(() => setState(!state), [state]);
  console.log({ state });

  const callbackref = useCallback((node) => console.log(node), []);
  return (
    <div ref={callbackref} className="pearent">
      <div ref={callbackref} className="child" />
      <button onClick={toggleState}>toggle</button>
    </div>
  );
}

これも予想とは違い、子→親の順番で処理された。
これはの順番もあるかもだけど、レンダリング処理が終わった順番から処理されるのかもしれない。

useEffectと比べて

useEffectの処理との順番を見る
予想：子→親→useEffect

export default function App() {
  // 再レンダリング用
  const [state, setState] = useState(false);
  const toggleState = useCallback(() => setState(!state), [state]);

  useEffect(() => {
    console.log('useEffect');
  }, []);

  const callbackref = useCallback((node) => console.log(node), []);
  return (
    <div ref={callbackref} className="pearent">
      <div ref={callbackref} className="child" />
      <button onClick={toggleState}>toggle</button>
    </div>
  );
}