【ReactNative】console.logの出力スピードと同じ速さでViewに描画したい

Question

現在動画のコントローラを作っており、中にスライダー機能があります。

スライダーを移動させると現在の秒数も変わるのですが、高速で移動させると秒数変更にラグがでます。
しかし、console.logでは高速でスライダーを移動させても秒数変更にラグが出ていません。

秒数の変更はReduxのActionを使っており、恐らくスライダーを移動させるたびにレンダリングが走るため処理が重くなるのだと思っています。

どうすればconsole.logで出力される速さでViewに描画させられるでしょうか？
コードと解説については以下の通りです。

コードと解説

スライダーは@react-native-community/sliderというライブラリーを使っています。

onValueChangeというイベントでスライダーが移動された時の情報を取得しています。
つまり、現在の秒数を変更するコードはonValueChange={value => changeCurrentTime(value)}という感じになります。
コードは以下の通りです。

　　function unifiedValueChange(value: number) {
　　　　changeCurrentTime(value); //ここのコードが原因
　　　　console.log(value);  //changeCurrentTime(value);をコメントアウトしてconsole.logのみだと同じスピード
　　}
..略

  <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}
  />

詳しい方、ご教示いただけると幸いです。
どうかよろしくお願いいたします。

Answer 1

自己解決しました。
@react-native-community/sliderのonValueChangeはスライドさせるたびに実行されるので、
もしReduxのアクションやsetStateを使うと膨大な処理が走ります。

なのでスロットリングという手法を使って、アクションやsetStateを制御する必要があります。
今回使ったのは@react-hook/throttleというライブラリです。

const [currenttime, setCurrenttime] = useThrottle(0, 4, false);という具合でfps単位で処理を制御できます。