如何在React中组合多个自定义钩子抓取？

// useFetchData.js
import { useState, useEffect } from 'react';

function useFetchData(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(url);
      const result = await response.json();
      setData(result);
      setLoading(false);
    }
    fetchData();
  }, [url]);

  return { data, loading };
}

export default useFetchData;

// useLocalStorage.js
import { useState } from 'react';

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.log(error);
      return initialValue;
    }
  });

  const setValue = (value) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.log(error);
    }
  };

  return [storedValue, setValue];
}

export default useLocalStorage;

// MyComponent.js
import React from 'react';
import useFetchData from './useFetchData';
import useLocalStorage from './useLocalStorage';

function MyComponent() {
  const { data, loading } = useFetchData('https://api.example.com/data');
  const [storedData, setStoredData] = useLocalStorage('myDataKey', {});

  // 组合逻辑：当数据加载完成后，更新本地存储
  React.useEffect(() => {
    if (!loading && data) {
      setStoredData(data);
    }
  }, [data, loading, setStoredData]);

  if (loading) return <div>Loading...</div>;

  return (
    <div>
      <h1>Data</h1>
      <pre>{JSON.stringify(storedData, null, 2)}</pre>
    </div>
  );
}

export default MyComponent;

// 使用 useMemo 缓存计算结果
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);