importReact,{useEffect}from'react';import{useCache}from'loki-usecache';importaxiosfrom'axios';constCachedDataComponent=()=>{const{ getDataFromCache, setDataToCache }=useCache();useEffect(()=>{constfetchData=async()=>{constcachedData=getDataFromCache('exampleData');if(cachedData){// If data exists in cache, use it directlyconsole.log('Data fetched from cache:',cachedData);}else{// If data doesn't exist in cache, make API call and store in cachetry{constresponse=awaitaxios.get('https://example-api.com/data');constnewData=response.data;setDataToCache('exampleData',newData);console.log('Data fetched from API:',newData);}catch(error){console.error('Error fetching data:',error);}}};fetchData();},[getDataFromCache,setDataToCache]);return<div>Rendering data from cache or API...</div>;};exportdefaultCachedDataComponent;