【ReactNative】useMemoで「Invalid hook call」というエラーがでる

Question

useMemoを使用すると

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

というエラーがでます。

以下がコードです。
どこが悪いのでしょうか？

 function arrange_video_current_time() {
    let timeH = Math.floor(
      (Math.round(currentTimeSlider) % (24 * 60 * 60)) / (60 * 60),
    );
    let timeM = Math.floor(
      ((Math.round(currentTimeSlider) % (24 * 60 * 60)) % (60 * 60)) / 60,
    );
    let timeS =
      ((Math.round(currentTimeSlider) % (24 * 60 * 60)) % (60 * 60)) % 60;
    let timeHMS = () => {
      if (timeH != 0) {
        return timeH + ':' + padZero(timeM) + ':' + padZero(timeS);
      } else return timeM + ':' + padZero(timeS);
    };

    return timeHMS();

    function padZero(v: number) {
      if (v < 10) {
        return '0' + v;
      } else {
        return v;
      }
    }
  }

const [currentTimeSlider, setCurrentTimeSlider] = useState(0); 

  function unifiedValueChange(value: number) { //useMemoのコードはじまり
    useMemo(() => {
      setCurrentTimeSlider(value);
    }, [currentTimeSlider]);
    return;
  }
//useMemoのコード終わり

return (
　　<Text
　　　　style={{
　　　　　　color: 'white',
　　　　　　paddingRight: 5,
　　　　　　fontWeight: 'bold',
　　　　}}>
　　　　{arrange_video_current_time()}
　　</Text>

　　<Slider
　　　　style={{
　　　　　　width: '50%',
　　　　　　transform: [{ scaleY: 0.8 }],
　　　　}}
　　　　minimumValue={0}
　　　　maximumValue={movie?.duration_second}
　　　　minimumTrackTintColor="#4169e1"
　　　　maximumTrackTintColor="#ddd"
　　　　thumbTintColor="#4169e1"
　　　　onSlidingStart={unifiedOnSlidingStart}
　　　　onValueChange={unifiedValueChange}
　　　　onSlidingComplete={unifiedOnSlidingComplete}
　　　　step={movie?.duration_second / 10}
　　　　value={currenttime}
　　/>

何卒よろしくお願いいたします。

Comments

[S.Percentage]

unifiedValueChangeってどこで呼ばれていますか？

[Hinoarashi.]

申し訳ございません、いま質問を修正しました。
SliderのonValueChange={unifiedValueChange}で呼ばれています。。

Answer 1

追記ありがとうございます。だいぶ理解できました。
もしかしてやりたいこと的にはuseCallbackが近いんじゃないかと思いますが、どうでしょうか？

const unifiedValueChange = useCallback((value: number) => {
    setCurrentTimeSlider(value);
}, [setCurrentTimeSlider]);

Comments

[Hinoarashi.]

コメントありがとうございます。
useCallbackは関数を保持するやつですよね？（認識違ってたらすいません。。）

実は現在動画プレイヤーのスライドバーを作っていまして、
最初はsetStateで現在の秒数を変えてたのですが、スライドを移動させるたびにsetStateで全体レンダリングが走るため非常に重くなりました。
そこで、useMemoであればstateが変われば保持していた数値を返すことができるとググったらでてきました。
それで使ってみようと思ったのですが、僕の目的であればuseCallbackの方が良いでしょうか？

[S.Percentage]

うーんなるほど、今見えてる範囲だと別にそこまで重くなる気はしないですが、多分動画本体を表示、再生するコンポーネントが別である感じですよね(videoタグ的な)？
だとするとそのコンポーネントの秒数を変更するタイミングをスロットリングしたほうがいいのかなと思います。
スロットリングする方法については調べるといくつか出てくると思うので省略しますが、現状ある情報だと外野からはこれくらいしかわからないかなと……

[Hinoarashi.]

ご回答ありがとうございます。

>多分動画本体を表示、再生するコンポーネントが別である感じですよね？

そうですね。
動画自体も重いですし、1つの画面で結構な処理をさせてるので。。

>スロットリングする方法については調べるといくつか出てくると思うので省略しますが、現状ある情報だと
>外野からはこれくらいしかわからないかなと……

Lodashでレンダリングタイミングをずらすとういう感じでしょうか？
https://stackoverflow.com/questions/48500832/throttling-using-lodash-in-react-native

[S.Percentage]

そうですね、lodashのthrottle使うのが一番楽かなと思います。

[Hinoarashi.]

了解です！ありがとうございます！

Answer 2

エラーメッセージのとおりです。関数コンポーネントでもカスタムフックでもない一般の関数から、useMemoを呼ぶことはできません。

Comments

[maisumakun]

チェックツールでは、「カスタムフックかどうか」を「useXxxのような名前かどうか」で判断することがあります。

カスタムフックとして作った関数であれば、useで始まる名前にしておきましょう。

[Hinoarashi.]

コメントありがとうございます。
このような形でも大丈夫でしょうか？

const useUnifiedValueChange = (value: number) => {
useMemo(() => {
return setCurrentTimeSlider(value);
}, [currentTimeSlider]);
};

[maisumakun]

適切ではありません。

onValueChange={unifiedValueChange}のように引数として渡していますが、カスタムフックを含めuseMemoなどの関数は、毎回同じ回数・同じ順序で呼ばないといけません。ということで、イベントハンドラ内にuseMemoは書けません。

[Hinoarashi.]

コメントありがとうございます。。
僕の知識不足で申し訳ないのですが、今回のケースだとどのように書いたら良いのでしょうか。。？

onValueChange={unifiedValueChange}でuseMemoを呼び出すことができないというのはわかったのですが。。

[maisumakun]

useMemoを使わない、というのがいちばん手っ取り早いのではないでしょうか。