[ response newbie ] UseEffect ( uselayouteffect )でコールバックを呼び出す際に、冗長な再描画を防ぐ

3041 ワード

react テキストリンク

変更を検出するために子要素にコールバックを渡すと、useEffect or useLayoutEffect とコールバックを依存関係配列に追加します.

 useLayoutEffect(() => {
    if(onScroll) onScroll(x, pos) // call the callback
  }, [x, pos, onScroll])

ただし、これは、親コンポーネントの再レンダリングを呼び出すときにコールバックがトリガーされたときに無限ループを発生させます.

  const onScroll = (x, y) => {
    setScroll([x, y])
  }

The onScroll 関数(オブジェクト)はすべての再表示で再生成され、結果として依存関係リストにあるので、それ自体の呼び出しを引き起こします.ブーム.

依存関係リストからコールバックを削除するだけで問題が解決できますが、react-hooks/exhaustive-deps lintを使用している場合に警告します.
もう一つの解決策はuseCallback コールバック関数を暗記しないように注意してください.

  const [scroll, setScroll] = useState([0, 0]
...
  const onScroll = useCallback((x, y) => {
    setScroll([x, y])
  }, [setScroll])

によるとofficial doc , 状態設定関数setState 再レンダリングには変更されませんので、コールバック関数のIDを保持するために依存関係リストで使用できます.

この問題について([ response newbie ] UseEffect ( uselayouteffect )でコールバックを呼び出す際に、冗長な再描画を防ぐ), 我々は、より多くの情報をここで見つけました https://dev.to/solring/react-newbie-prevent-redundant-re-rendering-when-calling-callbacks-in-useeffect-uselayouteffect-47ml

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol