Example

import React, { useEffect } from 'react';
import { useCache } from 'loki-usecache';
import axios from 'axios';

const CachedDataComponent = () => {
  const { getDataFromCache, setDataToCache } = useCache();

  useEffect(() => {
    const fetchData = async () => {
      const cachedData = getDataFromCache('exampleData');
      if (cachedData) {
        // If data exists in cache, use it directly
        console.log('Data fetched from cache:', cachedData);
      } else {
        // If data doesn't exist in cache, make API call and store in cache
        try {
          const response = await axios.get('https://example-api.com/data');
          const newData = 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>;
};

export default CachedDataComponent;