react-keep-alive

Unlike solutions that use display: none | block, react-keep-alive uses the React.createPortal API.

1. The <Provider> component is responsible for saving the component's cache and rendering the cached component outside of the application tree via a portal.
2. The <KeepAlive> component mounts these cached components from the portal back into the location where they need to be displayed.

This approach allows for smooth animations and full support for React Hooks, as components are not simply hidden but managed through portals.

Unlike many implementations that use display: none | block to hide components (which breaks CSS animations), react-keep-alive uses the React.createPortal API.

1. The <Provider> manages a cache of components.
2. When a component is 'hidden', it is rendered via a Portal outside the main application tree to preserve its state.
3. The <KeepAlive> component is responsible for mounting that cached component back into the correct position in the application when it needs to be displayed.

When using react-router, you must place the <Provider> inside the <Router>. Because react-keep-alive uses the modern React Context API, you must ensure you are using a recent version of react-router and react-router-dom to avoid context conflicts.

npm install react-router@next react-router-dom@next

Install react-keep-alive via npm.

Requirements:

• Minimum React version: 16.3.
• If using React Hooks (e.g., useKeepAliveEffect), you must use React 16.8 or higher.

npm install --save react-keep-alive

The KeepAliveProvider maintains an internal cache object where each entry is an ICacheItem.

Key behaviors:

• Cache Storage: Items are stored using a unique identification string.
• Automatic Cleanup: If the max prop is set, the provider performs a FIFO (First-In-First-Out) eviction when the cache size exceeds the limit.
• Portal Rendering: Cached components are rendered via ReactDOM.createPortal into a storeElement managed by the provider, which keeps them alive in the DOM outside the standard component tree lifecycle.

To use the library, you must wrap your application (or the relevant part of it) in a <Provider>. Then, wrap the components you want to cache in a <KeepAlive> component. Ensure the <KeepAlive> component is a child of the <Provider>.

import React from 'react';
import ReactDOM from 'react-dom';
import {
  Provider,
  KeepAlive,
} from 'react-keep-alive';
import Test from './views/Test';

ReactDOM.render(
  <Provider>
    <KeepAlive name="Test">
      <Test />
    </KeepAlive>
  </Provider>,
  document.getElementById('root'),
);

For functional components, use the useKeepAliveEffect hook to trigger logic when a component enters or leaves the view. Because cached components are not unmounted, standard useEffect hooks will not trigger when a component is hidden/shown via keep-alive.

Requirement: Requires a modern version of React.

import {useKeepAliveEffect} from 'react-keep-alive';

function Test() {
  useKeepAliveEffect(() => {
    console.log("mounted");
    return () => {
      console.log("unmounted");
    };
  });
  return (
    <div>
      This is Test.
    </div>
  );
}

Standard useEffect hooks do not trigger when a component is activated/deactivated via <KeepAlive> because the component is not unmounted. To run code when a component enters or leaves the active view, use the useKeepAliveEffect hook.

Requirement: Requires a recent version of React for Hooks support.

import React from 'react';
import {useKeepAliveEffect} from 'react-keep-alive';

function Test() {
  useKeepAliveEffect(() => {
    console.log("mounted");
    return () => {
      console.log("unmounted");
    };
  });
  return (
    <div>
      This is Test.
    </div>
  );
}

The <KeepAlive> component wraps the children that you want to cache.

Note: The innermost outer layer of the wrapped component must contain a real DOM tag.

Props:

• name: A unique identifier for the cached component. All <KeepAlive> names under the same <Provider> must be unique.
• disabled: If set to true, caching is disabled. This configuration only takes effect when the component's status changes from unactive to active.
• extra (v2.0.1+): Additional data that can be accessed via bindLifecycle.

The <Provider> component must be rendered at the top of your application. It manages the cache for all <KeepAlive> components within its tree.

Props:

• include: Only components matching this key will be cached. Accepts a string, an array of strings, or a RegExp (e.g., include="A,B", include={['A', 'B']}, or include={/A|B/}).
• exclude: Any component matching this key will not be cached. Accepts a string, an array of strings, or a RegExp.
• max (v2.5.2+): Sets the maximum number of items in the cache. When the limit is reached, the oldest cached value is deleted.

The max prop on KeepAliveProvider controls the size of the internal cache. When the number of cached items exceeds max, the provider automatically deletes the oldest entries to free up memory.

Default value: 10.

<KeepAliveProvider max={20}>
  {/* ... */}
</KeepAliveProvider>