高頻度ウェアラブルデータストリーム向けReactステートの最適化

// src/components/HealthDashboard.js
import React, { useState, useEffect } from 'react';

// モックデータストリーム
const mockWearableAPI = {
  subscribe: (callback) => {
    const intervalId = setInterval(() => {
      const heartRate = Math.floor(Math.random() * (120 - 70 + 1)) + 70;
      const steps = Math.floor(Math.random() * 10) + 1;
      callback({ heartRate, steps });
    }, 100); // 高頻度の更新！
    return () => clearInterval(intervalId);
  },
};

const HealthDashboard = () => {
  const [wearableData, setWearableData] = useState({ heartRate: 0, steps: 0 });
  const [totalSteps, setTotalSteps] = useState(0);

  useEffect(() => {
    const unsubscribe = mockWearableAPI.subscribe((newData) => {
      setWearableData(newData);
      setTotalSteps((prevSteps) => prevSteps + newData.steps);
    });

    return () => unsubscribe();
  }, []);

  // 「高価な」計算
  const calculateCaloriesBurned = (steps) => {
    console.log('Calculating calories...');
    // 複雑な計算をシミュレート
    let calories = steps * 0.04;
    for (let i = 0; i < 1e5; i++) {
        // 処理をシミュレート
    }
    return calories.toFixed(2);
  };

  const caloriesBurned = calculateCaloriesBurned(totalSteps);

  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
      <h1>Health Dashboard</h1>
      <p>❤️ Heart Rate: {wearableData.heartRate} bpm</p>
      <p>👟 Total Steps: {totalSteps}</p>
      <p>🔥 Calories Burned: {caloriesBurned}</p>
    </div>
  );
};

export default HealthDashboard;

// src/components/HealthDashboard.js (更新版)
import React, { useState, useEffect, useMemo } from 'react';

// ... mockWearableAPI ...

const HealthDashboard = () => {
  // ... state and useEffect ...

  const calculateCaloriesBurned = (steps) => {
    console.log('Calculating calories...');
    let calories = steps * 0.04;
    for (let i = 0; i < 1e5; i++) {
        // 処理をシミュレート
    }
    return calories.toFixed(2);
  };

  // 高額な計算の結果をメモ化
  const caloriesBurned = useMemo(() => {
    return calculateCaloriesBurned(totalSteps);
  }, [totalSteps]);

  // ... return statement ...
};

// src/components/HealthDashboard.js (更新版)
import React, { useState, useEffect, useMemo, useRef, useCallback } from 'react';
import throttle from 'lodash.throttle';

// ... mockWearableAPI ...

const HealthDashboard = () => {
  const [wearableData, setWearableData] = useState({ heartRate: 0, steps: 0 });
  const [totalSteps, setTotalSteps] = useState(0);

  // useRefで再レンダリングをトリガーせずに最新のデータを保持
  const latestData = useRef({ heartRate: 0, steps: 0, newSteps: 0 });

  useEffect(() => {
    const throttledUpdate = throttle(() => {
      setWearableData({ heartRate: latestData.current.heartRate });
      setTotalSteps((prevSteps) => prevSteps + latestData.current.newSteps);
      latestData.current.newSteps = 0; // 累積歩数をリセット
    }, 500); // 500msごとに最大1回状態更新

    const unsubscribe = mockWearableAPI.subscribe((newData) => {
      latestData.current.heartRate = newData.heartRate;
      latestData.current.newSteps += newData.steps;
      throttledUpdate();
    });

    return () => {
      throttledUpdate.cancel(); // スロットル関数をクリーンアップ
      unsubscribe();
    };
  }, []);

  // ... useMemo for caloriesBurned ...
  
  return (
    // ... JSX remains the same
  );
};

// src/stores/wearableStore.js
import { create } from 'zustand';

export const useWearableStore = create((set) => ({
  heartRate: 0,
  totalSteps: 0,
  updateData: (newData) =>
    set((state) => ({
      heartRate: newData.heartRate,
      totalSteps: state.totalSteps + newData.steps,
    })),
}));

// src/components/HeartRateDisplay.js
import React from 'react';
import { useWearableStore } from '../stores/wearableStore';

const HeartRateDisplay = () => {
  const heartRate = useWearableStore((state) => state.heartRate);
  console.log('Rendering HeartRateDisplay');
  return <p>❤️ Heart Rate: {heartRate} bpm</p>;
};

export default React.memo(HeartRateDisplay); // 親からの再レンダリングを防ぐためにメモ化

// src/components/StepCounter.js
import React from 'react';
import { useWearableStore } from '../stores/wearableStore';

const StepCounter = () => {
  const totalSteps = useWearableStore((state) => state.totalSteps);
  console.log('Rendering StepCounter');
  return <p>👟 Total Steps: {totalSteps}</p>;
};

export default React.memo(StepCounter);

// src/stores/wearableAtoms.js
import { atom } from 'jotai';

export const heartRateAtom = atom(0);
export const totalStepsAtom = atom(0);

// src/components/HeartRateDisplay.js
import React from 'react';
import { useAtomValue } from 'jotai';
import { heartRateAtom } from '../stores/wearableAtoms';

const HeartRateDisplay = () => {
  const heartRate = useAtomValue(heartRateAtom);
  console.log('Rendering HeartRateDisplay');
  return <p>❤️ Heart Rate: {heartRate} bpm</p>;
};

export default HeartRateDisplay;

// ... totalStepsAtomを使用したStepCounterの同様のコンポーネント ...

// src/App.js

import React, { useEffect, useRef } from 'react';
import { useWearableStore } from './stores/wearableStore';
import HeartRateDisplay from './components/HeartRateDisplay';
import StepCounter from './components/StepCounter';
import CalorieDisplay from './components/CalorieDisplay'; // 新しいコンポーネント
import throttle from 'lodash.throttle';

const mockWearableAPI = {
  subscribe: (callback) => {
    const intervalId = setInterval(() => {
      const heartRate = Math.floor(Math.random() * (120 - 70 + 1)) + 70;
      const steps = Math.floor(Math.random() * 10) + 1;
      callback({ heartRate, steps });
    }, 100);
    return () => clearInterval(intervalId);
  },
};

function App() {
  const updateData = useWearableStore((state) => state.updateData);
  const throttledUpdate = useRef(
    throttle((newData) => updateData(newData), 500)
  ).current;

  useEffect(() => {
    const unsubscribe = mockWearableAPI.subscribe(throttledUpdate);
    return () => {
      throttledUpdate.cancel();
      unsubscribe();
    };
  }, [throttledUpdate]);

  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
      <h1>Health Dashboard</h1>
      <HeartRateDisplay />
      <StepCounter />
      <CalorieDisplay />
    </div>
  );
}

export default App;