如何在 React 应用程序中的 ReactDOM.render 之前初始化 LocalStorage 中的数据

Question

I am using redux as my state management system and storing my authentication token in LocalStorage. Whenever I am logged in and reload my page it flickers between logged out state and then gets back to the logged-in page. How can I initialize data from LocalStorage and the do the rendering after data has come?

Answer 1

one approach is store in localStorage and then grab straight from state initialisation when your component loads. consider your top level component state, you could do something like this:

const [user, setUser] = useState(JSON.parse(localStorage.getItem('user')))

this is how I overcame the flicker in my app. if you grab it immediately rather than in useEffect or when the component mounts, it should work