Bring back previously-unmounted components and subtrees -- state and all -- when they remount.
These packages are in active development. Things will change rapidly, and it is not yet production-ready. Feedback is welcome.
When a React component stops being rendered, it's gone: local state, dom state, etc are removed. If you want to keep that prior state around you must store it elsewhere.
This repo provides libraries which can keep the old subtree around for a while, when desired.
Instead of unmounting, the subtree 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
- 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 partially-completed forms, it would just take time and engineering. React Hibernate is just a quick, easy way to get "good enough" coverage for the common cases.
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.