問題一覧に戻る
初級状態管理
問題26: stateの初期値関数

重い計算を遅延実行するためのstateの初期化に関数を使います。パフォーマンスを最適化し、不要な再計算を防ぎます。

import React, { useState } from 'react';

function ExpensiveComponent() {
  // 遅延初期化
  const [data, setData] = useState( => {
    // 重い計算は初回のみ実行
    console.log("重い計算");
    return Array(100).fill(0);
  });

  return (
    <div>
      <p>配列の長さ: {data.}</p>
      {/* アイテムを追加 */}
      <button onClick={() => setData([...data, 1])}>
        追加
      </button>
    </div>
  );
}

export default ExpensiveComponent;
···