react-component-state-cache

react-component-state-cache

Adds a simple caching mechanism so that components can remember their state when they are mounted, unmounted, and re-mounted.

Useful for when you need to remember (for example) user input in a search field between page navigations, or for any kind of data that is not worth it to store in global state (e.g. whether or not the user collapsed a certain info panel).

The cache is cleared when the user reloads the page / your app, so there is no persistence.

Installation

npm install react-component-state-cache

Then include the <ComponentStateContext /> component somewhere high up in your React DOM, for example like this

import React from 'react'
import {ComponentStateCache} from 'react-component-state-cache'
import {Provider} from 'react-redux' // for example
import MyApp from './MyApp.js'

class AppWrapper extends React.Component {
    render() {
        return (
            <Provider store={this.store}>
                <ComponentStateCache>
                    <MyApp />
                </ComponentStateCache>
            </Provider>
        )
    }
}

Example use

Now that you've installed the library, you can start using it in your components as follows:

import React from 'react'
import { withComponentStateCache } from 'react-component-state-cache'

class X extends React.Component {

    constructor(props) {
        super(props)

        this.state = {
            // anything, really.
        }
    }

    componentDidMount() {
        // Restore the component state as it was stored for key '35' in section 'lesson'
        //
        // You can choose 'section' and 'key' freely, of course.
        this.setState(this.props.componentstate.get('lesson', 35))
    }

    componentDidUnmount() {
         // store this state's component in section 'lesson' with key '35'
        this.props.componentstate.set('lesson', 35, this.state)
    }

}

export default withComponentStateCache(X)

or

export default connect(null, null, null, {forwardRef: true})(withComponentStateCache(X))

I'm sure you could also use this with hooks, but I'm not sure how. Pull requests for documentation welcome.

Cache expiration

You can remove all cached states in a section by calling

this.props.componentstate.remove('lesson')

or you can remove specific states by calling

this.props.componentstate.remove('lesson', 35)

The cache is also cleared whenever the user reloads your app.