Keep-Alive for React DOM
npm install react-fiber-keep-aliveReact DOM



is a component that maintains component state and avoids repeated re-rendering.
React Fiber and React Hooks.keep-alive.react-dom v16.8+.react-dom v17.react-dom v18.``bash`
npm install --save react-fiber-keep-alive
`JavaScript
import React from 'react';
import ReactDOM from 'react-dom';
import KeepAlive from 'react-fiber-keep-alive';
const root = document.getElementById('root');
ReactDOM.render((
...
...
), root);
`
- Provide root container element.`
JSX`
render()
- Must be the root container of .keep-alive
- If not provided, will be disabled.
- Wrap your component with `
JSX`
- prop "name" is a required unique string used to identify the cache.
- prop "ignore" is a optional boolean used to bypass and clear the cache. (since 0.5.0)
- prop "onRead(name: string): void" is a optional callback after cache applied. (since 0.7.0)
- prop "onSave(name: string): void" is a optional callback after cache saved. (since 0.7.0)
- Wrap your component with keepLive().`
JavaScript
import { keepAlive } from 'react-fiber-keep-alive';
const NewComponent = keepAlive(YourComponent, (props) => {
// props: the income props for
// you can use react hooks here
return unique-key;
// or
return {
name: unique-key,
// other props for `
};
});
- Hook: useIgnoreKeepAlive() returns a cache cleaner function.`
JavaScript
import { useIgnoreKeepAlive } from 'react-fiber-keep-alive';
const ignoreCache = useIgnoreKeepAlive();
ignoreCache(unique-key);`
- If the render() of class component has side effects.`
JavaScript
import { markClassComponentHasSideEffectRender } from 'react-fiber-keep-alive';
markClassComponentHasSideEffectRender(ClassComponent);
// Example:
class Test extends React.Component {
render() {
// side effect here, ex: emit event here.
return null;
}
}
markClassComponentHasSideEffectRender(Test);
`
- If no need to trigger the effect hook while remounting.
`JavaScript
import { markEffectHookIsOnetime } from 'react-fiber-keep-alive';
markEffectHookIsOnetime(effectHook);
// Example:
React.useEffect(markEffectHookIsOnetime(() => {
// do something
}), []);
React.useLayoutEffect(markEffectHookIsOnetime(() => {
// do something
}), []);
`
- KeepAlive.Context (since 0.7.0)`
TSX
import * as React from 'react';
import KeepAlive, { Context, KeepAliveCache } from 'react-fiber-keep-alive';
import LRUCache from 'lru-cache';
/// Example: Use LRU to manage the cache
const YourKeepAliveProvider: React.FC<{
children: React.ReactNode;
value: null | HTMLElement;
}> = (props) => {
const container = props.value;
const context: Context = React.useMemo(() => {
if (!container) {
return [];
}
const caches = new LRUCache
max: 10,
});
return [container, caches, new Map()];
}, []);
return (
{props.children}
);
};
`
- Be careful the global side effects. (ex: insert global style)
- Do not use under the .
- Recursive handled by top level .container
- If the changed in ReactDOM.createPortal(children, container).react-devtools
- All saved sub tree state will be lost.
- Errors from after remounted.
- Try force refresh the components tree. (ex: updates components filter)
- [x] hydrate(children, container)$3
- [x] createRoot(container).render(children)
- [x] hydrateRoot(container, children)$3
- [x] Component.getDerivedStateFromProps()
- [x] Component.getDerivedStateFromError()
- [x] instance.componentDidMount()
- [x] instance.getSnapshotBeforeUpdate()
- [x] instance.componentDidUpdate()
- [x] instance.componentWillUnmount()
- [x] instance.render()$3
- [x] useContext()
- [x] useCallback()
- [x] useEffect()
- [x] useImperativeHandle()
- [x] useLayoutEffect()
- [x] useMemo()
- [x] useRef()
- [x] useState()
- [ ] useDebugValue()
- [ ] useDeferredValue() (since v18)
- [ ] useId() (since v18)
- [x] useInsertionEffect() (since v18)
- [ ] useSyncExternalStore() (since v18)
- [ ] useTransition() (since v18)$3
- [x] ReactDOM.createPortal(children, container)
- [x] React.memo()
- [x] React.forwardRef()
- [x] React.lazy()
- [x]
- [ ] If you find a bug, please file an issue on our issue tracker on GitHub.
Copyright © 2022 Shen Junru • MIT license.