react-freeze

React Freeze

Prevent React component subtrees from rendering.

What is this? 🤔

This library allows for freezing renders of the parts of the React component tree using Suspense mechanism introduced in React 17. The main use-case for this library is to avoid unnecessary re-renders goal is to avoid unnecessary re-renders

Quick start

FAQ ❓

When component subtree is frozen what happens to state changes that are executed on that subtree

All state changes are executed as usual, they just won't trigger a render of the updated component until

Whan happens to the non-react state of the component after defrost? Like for example scroll position?

Since all the "naitve views" (DOM elements or platform-specific views in react native) are kept when the component is frozen their state (such as scroll position, text typed into text input fields, etc.) is restored when they come back from the frozen state. In fact, they are just the same component (same DOM nodes for react-dom / same views for react-native).

What happens when there is an update in a redux store that frozen component is subscribed to?

Can freezing some of my app components break my app? And how?

There are few ways that we are aware of when <Freeze> can alter the app behavior:

• When attempting to freeze parts of the app that is visible to the user at a given moment -- in this case the frozen part is going to be replaced by the placeholder (or just by nothing if no placeholder is provided). So unless you really want this behavior make sure to only set freeze to true when the given subtree should not be visible and you expect user to not interact with it. A good example are screens on the navigation stack that are down the stack hierarchy when you push more content.
• When you rely on the frozen parts layout to propertly position the unfrozen parts. Note that when component is in frozen state it gets replaced by a placeholder (or by nothing if you don't provide one). This may impact the layout of the rest of your application. This can be workaround by making placeholder take the same amount of space as the view it replaces, or by only freezing parts that are positioned absolutely (e.g. the component that takes up the whole screen).
• When component render method has side-effects that relay on running for all prop/state updates. Typically, performing side-effects in render is undesirable when writing react code but can happen in your codebase nontheless. Note that when subtree is frozen your component may not be rendered for all the state updates and render method won't execute for some of the changes that happen during that phase. However, when the component gets back from the frozen state it will render with the most up-to-date version of the state, and if that suffice for the side-effect logic to be correct you should be ok.

Made by Software Mansion and licenced under The MIT License.

Similar packages

Other packages similar to react-freeze

react-lazyload

react-lazyload is a package that provides lazy loading functionality for React components. It is similar to react-freeze in that it helps optimize performance by controlling when components are rendered. However, react-lazyload focuses on delaying the rendering of components until they are in view, whereas react-freeze focuses on preventing updates to components that are not active.

react-window

react-window is a package for efficiently rendering large lists and tabular data in React. It is similar to react-freeze in that it helps improve performance by minimizing the number of rendered components. However, react-window achieves this by only rendering visible items in a list, while react-freeze prevents updates to inactive components.