react-pauseable-containers

React-Pauseable-Containers

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

Part of React Hibernate

Overview

When a component's props, state, or context values change, it will rerender. This is fundamental to React and cannot be avoided.

This package includes components which will prevent those changes from reaching the component where possible.

Each receives a shouldUpdate prop: when set to false, changes in outside values will be suppressed.

Components

<PauseableComponentContainer>

Prevents children from rerendering when the parent component updates. This is essentially just a typescript-friendly version of react-static-container

<PauseableContextContainer Context={...}>

Freezes any React context, to prevent subscribed components in the subtree from updating when it changes.

<PauseableReduxContainer dispatchWhenPaused={boolean}>

Prevents subscribed components from rerendering when the redux state changes, or the return value from useSelector. The dispatchWhenPaused prop controls the canDispatch option of a Redux-Pauseable-Store.

How to use this

With React-Hibernate or react-pauseable-containers, using one of these components -- or a new component composed from several of them together -- can prevent subtrees from updating while they're hibernating, to avoid needless work.

These can also be used on their own.

Use Cases

• The background screen behind a modal or dialog
• Inactive tabs or panes when using a wizard, accordion, or tabs widget.
• Freezing UI updates and interactions while performing reauthentication or other blocking tasks