How to cache react component fetches? - reactjs

Question

Let's say you have a component like this:
function MyComponent({ index }) {
const [data, setData] = useState('');
useEffect(() => {
(async function() {
const result = await fetchData(index);
setData(result);
})();
}, [index]);
return <h1>{data}</h1>;
}
Whenever the index changes, we will re-fetch the data and render it. How can I cache this so that we don't have to re-fetch the same index from before?

Answer 1

You want to memoize your results, like:
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>;
}

Answer 2

create a component cache Context:
const MyComponentCacheContext = React.createContext() ;
2.Create a component Cache Provider and give cache an intial Value of { } (empty Object) :
function MyComponentCacheProvider (props){
//we create this in step 3
const [cache,dispatch]= React.useReducer(MyComponentCacheReducer,{})
const value =[cache,dispatch]
return <MyComponentCacheContext value={value} {...props}/>
}
3.we will make the cache look like this => {{index:data},{index:data},...}so create a component cache Reducer that return the desired shape
:
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}`)
}
}
}
4.let's make all the code above within a custome hook so we can make it reusable:
function useMyComponentCache(){
const MyContext = React.useContext(MyComponentCacheContext)
if(!MyContext){
throw new Error (`useMyComponentCache must be within a MyComponentCacheProvider`)
}
return MyContext
}
5.let's customize your Component function so we can use the code above :
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>;
}
6.rendering step :put your component within CacheProvider !!!
function App(){
return ( <MyComponentCacheProvider>
<MyComponent index={0} />
</MyComponentCacheProvider>
)
}