问如何缓存react组件获取？

EN

const cache = {};

async function memoFetch(index) {
  if (cache[index]) {
    return cache[index];
  }
  const data = fetchData(index);
  cache[index] = data;
  return data;
}


function MyComponent({ index }) {
  const [data, setData] = useState('');

  useEffect(() => {
    (async function() {
      const result = await memoFetch(index);
      setData(result);
    })();
  }, [index]);

  return <h1>{data}</h1>;
}

 function MyComponentCacheProvider (props){
                                            //we create this in step 3 
    const [cache,dispatch]= React.useReducer(MyComponentCacheReducer,{})
    const value =[cache,dispatch]
    return <MyComponentCacheContext value={value} {...props}/>

}

function MyComponentCacheReducer (state,action) {
 switch(action.type){
     case 'ADD-TO-CACHE':
         return {...state,[action.index]:action.data}
     default :{
         throw new Error (`unhandled action type ${action.type}`)
     }
 }
}

function useMyComponentCache(){
const MyContext = React.useContext(MyComponentCacheContext)
if(!MyContext){
    throw new Error (`useMyComponentCache must be within a MyComponentCacheProvider`)
}
return MyContext
}

function MyComponent({ index }) {
  const [data, setData] = useState('');
  const [cache ,dispatch]= useMyComponentCache()

  useEffect(() => {
    if(cache[index]){
        return setData(cache[index])
    }else{
        //here we fetch data --then--> we store it into the cache  immedialty
          const dataFetcher=fetchData(index).then(
                                data =>{
                                    dispatch({type:'ADD-TO-CACHE',index,data})
                                    return data
                                }
                             )
        // updating state 
          const PromiseHandler =React.useCallback(
              promise=>{
                  promise.then(
                      data => {
                          setData(data)
                      },
                  )
              }
          ,[setData]) 
          // Execution-Time
         PromiseHandler(dataFetcher)
    }
   
  }, [cache,dispatch,index,PromiseHandler,setData]); // i assume that fetchData is 
  //a stable internal module so i didn t put it to the dependecies list

  return <h1>{data}</h1>;
}

function App(){

return ( <MyComponentCacheProvider>
            <MyComponent index={0} /> 
         </MyComponentCacheProvider>
       )
}