Functional component breaks on browser refresh because object that is pulled from redux state isn‘t available on time

Question

I frequently have the problem, that a functional components breaks on browser refresh because an object that is needed in the component has to be reloaded (i.e. pulled from redux state via mapStateToProps()) and is not available on time.

One solution for this problem seems to be to persist that object in session storage so it can be pulled from there after the browser refresh.

However, this seems like such a terrible workaround.

I am sure there is a better solution to what I believe is a very common problem.

Answer 1

It's because your component will be rendered at least once before getting the value from Redux as you said. We usually do something like this :

// Be careful on the test if this is an array, test the length etc
if (!yourVariableToTest) return null;

return (
 <div>
   // Your content ...
 </div>

);

Answer 2

I am assuming you are storing an object or similar in your Redux state that is fetched asynchronously. Causing page navigations to work seamlessly (considering the state has been cached previously) and refreshes to fail (because the selector has no state to act upon).

My suggestion is very simple: loading.

Ideally, you should not render the component until all the state is ready.

export function Component() {
    const something = useSelector(getSomething)
    
    if (!something) {
        return null; // or return <LoadingSpinner />
    }

    return (
        <YourComponent />
    )
}

Answer 3

Yes, it is a very common problem, You could use useEffect and useState hook to resolve this problem. If the required object is a type of array then initialized with an empty array :

const [myVariable,setValue] = useState([])

** And if the type of data is different then initialize accordingly ** and update the value when it came from the store

useEffect(()=>{

if(valueFromStore){

 setValue(valueFromStore)

 }

},[valueFromStore])

try this it won't throw any exception on refresh.

import React,{useState,useEffect} from 'react'