データの更新とは異なるタイミングでそのデータを描画更新に渡す（React）

3505 ワード
React hooks hooks テキストリンク

こんにちは。
React の勉強中で、データの更新とは異なるタイミングでそのデータを描画更新に渡す方法を習得しようとしています。10 ms 毎に更新される変数 cum の値を、1000 ms 毎に描画したい想定です。

手始めに、"Making setInterval Declarative with React Hooks" (useInterval) を見つけ、変数 cum （10 ms 毎に値を更新： +1）の値を、描画更新用の変数 num へ代入を行うことで（1000 ms 毎）、描画実行させてみました。描画上で更新される num の値を確認すると +100 づつ増加し想定通りの動きでした。

ただし、描画更新用の変数へ代入するという方法は冗長のような気もしますし、データとして巨大な要素数の配列などを扱いたくなった場合は処理が重くなるかなと考えています。

num: 99 → 199 → 299 → 399
App.jsx
import React, { useState } from 'react';
import useInterval from '../src';

function App(props) {
  const [num, setNum] = useState(0);
  const [cum, setCum] = useState(0);

  useInterval(() => {
   setCum(cum + 1);
  }, 10);

  useInterval(() => {
    setNum(cum);
  }, 1000);

  return (
    <div>
      <p>num: {num}</p>
    </div>
  );
}

export default App;
awk基礎知識のまとめ(1)
nyoj 312 20歳の誕生日