Trying to set state using useContext values

Question

Hi there I am creating a gatsby react app and my main goal on this page is to delete some localStorage and reset context AFTER render. The AFTER is important because i want my page to render with some data but after it has rendered, i want to delete that data. (I have some data in localStorage in order to have persistent state)

1. Is this even possible?

2. My first attempt looked like this :

   • For this code snippet, my component appears if i comment out the useEffect which makes sense but when I add the useEffect it doesn't render my component, which is expected but not what i want :(

const {data, setData} = useContext(context)

useEffect(() => {
  console.log('deleting');
  setData({});
  localStorage.removeItem('data');
}, []);


const components = [];
for (const item in data) {
    if ({}.hasOwnProperty.call(data, item)) {
      const { dataItem } = data[item];
      components.push(<Component dataItem={dataItem} />);
    }
  }


return (
   <div>
     {components}
   <div>
);

3. My second attempt was a little similar the difference is I tried saving the data into a localState to see if that would allow it to persist even after it gets deleted and I am no longer grabbing the context in the child component, I'm instead grabbing it in the parent component and passing it as a prop to the child:
   • The problem here is that my localData is always an empty object. However my console statements show that data actually has data in it, but when i useState(data) my localData is always an empty object. Even if I useState({}) and then i setlocalData(data) i get an infinite loop :(

console.log(data);
const [localData, setlocalData] = useState(data); //this is the same data as in the other snippet
console.log(localCartInfo);

// rest of the code is the same except im now replacing data with localdata

If anybody who knows how react actually works can help me that would be very much appreciated.

Answer 1

I ended up solving this issue by saving the context data into a cookie on first page load. This worked better than setting a localState because it didnt require a component reload to set the cookie AND turns out a cookie works way better for my use case anyway due to the possibility of making it expire.

I did this like so :

let localData = {};

const {data, setData} = useContext(dataContext);

if (Object.keys(data).length > 0) {
      // create cookie with existing data before it gets deleted
      const cookieString = `localData=${JSON.stringify(data)}`;
      document.cookie = cookieString;
      localData = data;
    } else {
      // if data doesn't exist, get the data from the localData cookie
      localData = JSON.parse(document.cookie.substring(10));
    }