Skip to content

Restore previously-unmounted React routes and subtrees

License

Notifications You must be signed in to change notification settings

spautz/react-hibernate

Repository files navigation

Hibernating Components for React & React Router

Bring back previously-unmounted components and children -- state and all -- when they remount.

build status test coverage

Overview

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.

Cache options are available to control how many subtrees may be hibernated at a time, and for how long.

Use Cases

  • 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.

Packages

See each package for detailed docs.

react-hibernate

npm version

Restore previously-unmounted subtrees -- state and all -- on remount.

react-router-hibernate

npm version test coverage dependencies status gzip size

A react-router Switch which can leave inactive routes mounted-but-inactive until you navigate back.

react-pauseable-containers

npm version test coverage dependencies status gzip size

Prevent subtrees from rerendering when their parent changes, or when values from context change.

redux-pauseable-store

npm version test coverage dependencies status gzip size

Derive one redux store from another, then pause its state and/or actions. This is used by react-pauseable-containers.

About

Restore previously-unmounted React routes and subtrees

Resources

License

Stars

Watchers

Forks

Packages

No packages published