Can't access to updated localStorage in Child component (React) - reactjs

Question

In Parent component i'm getting data from an API, then I save it to the localStorage. In Parent there's React Router's Switch and Route to Child component. Right after i clean my localStorage and I refresh the page, Parent fetching data from API and save it to the localstorage but I cant get access to localstorage in the Child element.
Parent:
const getWarriorsData = () => {
axios
.get(APIAddress)
.then(response => response.data)
.then(({warriors}) => {
let warriors_numbers = [];
warriors.forEach((warrior) => {
let warriorString = JSON.stringify(warrior);
localStorage.setItem(warrior.number, warriorString);
warriors_numbers.push(warrior.number);
});
localStorage.setItem('warriorsNumbers', JSON.stringify(warriors_numbers));
localStorage.setItem('expire', Date.now() + 259200000);
});
};
useEffect( () => {
if(localStorage.getItem('expire') < Date.now() || localStorage.getItem('expire') === null ){
getWarriorsData();
};
},[]);
return (
<Router>
<MenuContext.Provider value={[linksContext, setLinksContext]}>
<Menu />
<Switch>
<Route path="/" exact component={Child} />
</Switch>
</MenuContext.Provider>
</Router>
);
Child
console.log({...localStorage}); //empty after cleaning localstorage and page refresh

Answer 1

The reason for your Problem:
As you know the child is a part of the render cycle of your parent.
So consider the parent here:
Being a functional component what happens is first the returned JSX is executed , then the useEffect hooks are executed as the components be it functional or class based component all will run render once before going on to the lifecycle of the component.
Hence now your child component has been rendered even before your API is called.
To debug this what you can do is have a console.log for your use effect in parent which will run on mount. Similarly in Child as well.
Also logs can be added in the starting of components as well as the function gets executed when the render is called.
This will result in :
// log from child useEffect
// log from parent useEffect
Which is the exact reason for you to not receive the data in child.
Solution for your Problem:
The main solution for you would be to delay the child from rendering until the API call is made which can be based on a flag or an enum or even the data itself which can become a part of the state for parent.
I would recommend you to choose the above options and also avoid usage of localstorage as this does not warrant the use case of a localStorage. You could rather have it as a state and pass it down to child as props or if your use case is a larger component tree then context or redux can be considered.