参照が変更されたときに再レンダリングする方法

Question

コード：

import DrawControl from "react-mapbox-gl-draw";

export default function MapboxGLMap() {
    let drawControl = null
    return(
      <DrawControl ref={DrawControl => {drawControl = DrawControl}}/>
    )
}

drawControlがnullでない場合にデータをロードしたい。コールバック参照を使用する可能性のあるドキュメントを確認します。

では、drawControlの変更をリッスンしてデータをロードするにはどうすればよいですか？

Answer 1

useEffectの変更に基づいたuseRefのコールバック関数を使用できます

   function useEffectOnce(cb) {

        const didRun = useRef(false);
        useEffect(() => {
            if(!didRun.current) {
                cb();
                didRun.current = true
            }
        })
    }