Next.js + biome + WebGLにてuseEffect内でgl.useProgramを実行しようとしてハマる（This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.） 🙀

Next.js + biome で WebGLコンテンツを開発していたところ、

useEffect(() => {
  if (gl && program) {
    gl.useProgram(programRef.current);
  }
}, [gl, program]);

と、useEffect内でgl.useProgramを実行しようとすると、

This hook is being called conditionally, but all hooks must be called in the exact same order in every component render.

という指摘が消えずに困ってました。

原因

どうやら、useXXXとuseから始まる関数をReactのuseXXXと判定しているようです。

解決策

useEffect(() => {
  if (gl && program) {
    const _useProgram = gl.useProgram.bind(gl);

    _useProgram(programRef.current);
  }
}, [gl, program]);

と、リネームすることで指摘が消えました。

なんて不毛なリネームなんだ。

「useCallback、useEffect、useStateみたいにReactに登録されている関数だけ警告を出してくれよ」と思いましたが、カスタムフックを検知しようとすると、useXXXに警告を出さざる得ないですし、それならせめてメソッドは無視してくれよと思いましたが、React.useCallbackとか、カスタムフックのライブラリで、nameSpace.useXXXみたいな関数のメソッドとしての呼び出しを考慮すると、hoge.useXXXに警告を出さざる得ないですしで、結局リネームして使うしか無い気がしました。