Bring back previously-unmounted components and children -- state and all -- when they remount.
When a React component stops being rendered, it's gone: local state, dom state, etc are removed. If you want to retain any of that prior state, you must store it elsewhere.
This repo provides libraries which can keep the old component tree around for a while, when desired.
Instead of unmounting, the component tree goes into "hibernation". It will "wake up" when you return, including all internal state, as if you never left.
- React Router Hibernate works per-route, if you're using React Router v5
- React Hibernate works for any React subtree (not yet published)
- React Pauseable Containers improve performances by freezing all updates to hibernated subtrees
Cache options are available to control how many subtrees may be hibernated at a time, and for how long.
- Screens which are slow to initialize: avoid initializing a second time
- Form values: restore half-completed form fields if the user leaves and come back later
- Background tasks like file uploads: dispatch actions from unmounted components
- Accordion panels, steps in a wizard, or other temporarily-hidden content
In general, this is a "good enough" alternative to storing component state in Redux or an external cache: you could build a powerful system to track internal state and restore partially-completed forms, it would just take development time. React Hibernate is just a quick, easy way to get "good enough" coverage for the common cases.
See each package for detailed docs.
Restore previously-unmounted subtrees -- state and all -- on remount.
A react-router Switch which can leave inactive routes mounted-but-inactive until you navigate back.
Prevent subtrees from rerendering when their parent changes, or when values from context change.
Derive one redux store from another, then pause its state and/or actions. This is used by react-pauseable-containers.