React pass cache i get / set function in context

const {useState, useContext, createContext} = React

const fn = () => undefined
const CacheContext = createContext({data: {}, get: fn, set: fn})

const App = () => {
  const [cacheData, setCacheData] = useState({});
  const getCache = (key) => {
    console.log('Getting value from cache with key ' + key, cacheData);
    return cacheData[key];
  }
  const setCache = (key, data) => {
    try{
      console.log(cacheData);

      console.log('Setting value to cache with key ' + key, data);
      let dataCopy = JSON.parse(JSON.stringify(cacheData));
      dataCopy[key] = data;
      console.log(dataCopy, cacheData);
      setCacheData(dataCopy); 
      console.log('jaja');
    }catch(err){
      console.log(err);
    }
  }
  
  return (
    <CacheContext.Provider value={{data: cacheData, get: getCache, set: setCache}}>
      <Main />
    </CacheContext.Provider>
  )
}

const useCache = () => useContext(CacheContext)

const Main = () => {
  const cache = useCache()
  const [key, setKey] = useState('key')
  const [value, setValue] = useState('value')
  
  return (
    <div>
      <input value={key} onChange={(e) => setKey(e.target.value)} /> :
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <button onClick={() => cache.set(key, value)}>Set</button>
      <div>Existing keys: [{Object.keys(cache.data).join(', ')}]</div>
      <div>Current value of '{key}': {cache.get(key) || 'undefined'}</div>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

const {useState, useContext, createContext} = React

const fn = () => undefined
const CacheContext = createContext({data: {}, get: fn, set: fn})

const App = () => {
  const [cacheData, setCacheData] = useState({});
  const getCache = (key) => {
    console.log('Getting value from cache with key ' + key, cacheData);
    return cacheData[key];
  }
  const setCache = (key, data) => {
    try{
      console.log(cacheData);

      console.log('Setting value to cache with key ' + key, data);
      let dataCopy = JSON.parse(JSON.stringify(cacheData));
      dataCopy[key] = data;
      console.log(dataCopy, cacheData);
      setCacheData(dataCopy); 
      console.log('jaja');
    }catch(err){
      console.log(err);
    }
  }
  
  return (
    <CacheContext.Provider value={{data: cacheData, get: getCache, set: setCache}}>
      <Main />
    </CacheContext.Provider>
  )
}

const Main = () => {
  const {data, get, set} = useContext(CacheContext)
  const [key, setKey] = useState('key')
  const [value, setValue] = useState('value')
  
  return (
    <div>
      <input value={key} onChange={(e) => setKey(e.target.value)} />
      :
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <button onClick={() => set(key, value)}>Set</button>
      <div>Existing keys: [{Object.keys(data).join(', ')}]</div>
      <div>Current value of '{key}': {get(key) || 'undefined'}</div>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

const {useState, useContext, useRef, createContext, memo} = React

const fn = () => undefined
const CacheContext = createContext({data: {}, get: fn, set: fn})

const App = memo(() => {
  const [cacheData, setCacheData] = useState({});
  const dataRef = useRef();
  dataRef.current = cacheData;
  const getCache = (key) => {
    console.log('Getting value from cache with key ' + key, cacheData);
    return cacheData[key];
  }
  const setCache = (key, data) => {
    try{
      console.log(cacheData);

      console.log('Setting value to cache with key ' + key, data);
      setCacheData(current => {
        const dataCopy = JSON.parse(JSON.stringify(current));
        dataCopy[key] = data;
        return dataCopy;
      })
      setCacheData(dataCopy); 
      console.log('jaja');
    }catch(err){
      console.log(err);
    }
  }
  
  return (
    <CacheContext.Provider value={{dataRef, get: getCache, set: setCache}}>
      <Main />
    </CacheContext.Provider>
  )
})

const Main = memo(() => {
  const {dataRef, get, set} = useContext(CacheContext)
  const [key, setKey] = useState('key')
  const [value, setValue] = useState('value')
  
  const setAsync = () => {
    set('in progress', key)
    setTimeout(() => {
      set(key, value)
      // notice how mutating a reference will NOT trigger a re-render, unlike using `set`
      // set('in progress', undefined)
      delete dataRef.current['in progress']
    }, 3000)
  }
  
  return (
    <div>
      <input value={key} onChange={(e) => setKey(e.target.value)} />
      :
      <input value={value} onChange={(e) => setValue(e.target.value)} />
      <button onClick={setAsync}>Set</button>
      <div>Existing keys: [{Object.keys(dataRef.current).join(', ')}]</div>
      <div>Current value of '{key}': {get(key) || 'undefined'}</div>
      <div>Current value of 'in progress': {get('in progress') || 'undefined'}</div>
    </div>
  )
})

ReactDOM.render(<App />, document.getElementById('root'))

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>