Q:

Preserve internal state on page refresh in React.js

It must be pretty regular issue. 
I'm passing props down to the children and I'm using it there to request to the endpoint. More detailed: I'm clicking on the list item, I'm checking which item was clicked, I'm passing it to the child component and there basing on prop I passed I'd like to request certain data. All works fine and I'm getting what I need, but only for the first time, ie. when refreshing page incoming props are gone and I cannot construct proper URL where as a query I'd like to use the prop value. Is there a way to preserve the prop so when the page will be refresh it will preserve last prop.
Thank you!

A:

(You might want to take a look at: https://github.com/rt2zz/redux-persist, it is one of my favorites)
Just like a normal web application if the user reloads the page you're going to have your code reloaded. The solution is you need to store the critical data somewhere other than the React state if you want it to survive.
Here's a "template" in pseudo code. I just used a "LocalStorage" class that doesn't exist. You could pick whatever method you wanted.
class Persist extends React.Component {
    constuctor(props) {
        this.state = {
            criticalData = null
        }
    }
    componentDidMount() {
        //pseudo code
        let criticalData = LocalStorage.get('criticalData')
        this.setState({
            criticalData: criticalData 
        })
    }

    _handleCriticalUpdate(update) {
        const merge = {
            ...LocalStorage.get('criticalData')
            ...update
        }

        LocalStorage.put('criticalData', merge)
        this.setState({
            criticalData: merge
        })
    }

    render() {
        <div>
            ...
            <button 
                onClick={e => {
                    let update = ...my business logic
                    this._handleCriticalUpdate(update) //instead of set state
                }}
            >
            ....
        </div>
    }
}

By offloading your critical data to a cookie or the local storage you are injecting persistence into the lifecycle of the component. This means when a user refreshes the page you keep your state.
I hope that helps!

