I had been wrapping my components with an improper tag that is, NextJS is not comfortable having a p tag wrapping your divs, sections etc so it will yell "Hydration failed because the initial UI does not match what was rendered on the server". So I solved this problem by examining how my elements were wrapping each other.

TL;DR; A custom renderer for ReactJS that uses Web Workers to run the expensive Virtual DOM diffing calculations

Tl;Dr; ReactJS is faster when Virtual DOM reconciliations are done on a Web Worker thread.

Context selectors, however, could be faked with the use of higher-order components and React.memo.

There is no way to prevent a component that uses a portion of Context value from re-rendering, even if the used piece of data hasn’t changed, even with useMemo hook.

✅ Preventing Context re-renders: Context selectors

If Context manages a few independent data chunks, they can be split into smaller providers under the same provider. That way, only consumers of changed chunk will re-render.

✅ Preventing Context re-renders: splitting data into chunks

That way, components that use API only won’t re-render when the data changes.

If in Context there is a combination of data and API (getters and setters) they can be split into different Providers under the same component. That way, components that use API only won’t re-render when the data changes.

✅ Preventing Context re-renders: splitting data and API

If Context Provider is placed not at the very root of the app, and there is a possibility it can re-render itself because of changes in its ancestors, its value should be memoized.

✅ Preventing Context re-renders: memoizing Provider value

Preventing re-renders caused by Context

⛔️ Antipattern: random value as key in lists

if the list is static, i.e. elements are not added/removed/inserted/re-ordered

It is okay to use array’s index as key, if the list is static, i.e. elements are not added/removed/inserted/re-ordered.

Value in key should be a string, that is consistent between re-renders for every element in the list.

Important: just providing key attribute will not improve lists' performance. To prevent re-renders of list elements you need to wrap them in React.memo and follow all of its best practices.

Improving re-render performance of lists

the typical use case for useMemo would be to memoize React elements. Usually parts of an existing render tree or results of generated render tree, like a map function that returns new elements

useMemo has its cost (consumes a bit of memory and makes initial render slightly slower)

✅ useMemo for expensive calculations

If a component uses non-primitive value as a dependency in hooks like useEffect, useMemo, useCallback, it should be memoized.

If a child component is wrapped in React.memo, all props that are not primitive values have to be memoized

✅ Necessary useMemo/useCallback

⛔️ Antipattern: unnecessary useMemo/useCallback on props

If a parent component re-renders, it will trigger re-render of a child component regardless of its props.

Memoizing props by themselves will not prevent re-renders of a child component.

React.memo has to be applied to the elements passed as children/props.

✅ React.memo: components as props or children

All props that are not primitive values have to be memoized for React.memo to work

✅ React.memo: component with props

Wrapping a component in React.memo will stop the downstream chain of re-renders that is triggered somewhere up the render tree, unless this component’s props have changed.

Preventing re-renders with React.memo

Props are not affected by the state change, so heavy components won’t re-render

encapsulates the state inside a smaller component, and heavy components are passed to it as props

✅ Preventing re-renders with composition: components as props

✅ Preventing re-renders with composition: children as props

✅ Preventing re-renders with composition: moving state down

There is also a big myth: that re-renders happen when the component’s props change. By itself, it’s not true (see the explanation below).

hooks changes

context changes

parent (or children) re-renders

state changes

There are four reasons why a component would re-render itself:

Sometimes, Create React App will produce an error when you try to create a new application using npx or npm init.

The current web developmennt ONLY offload the tasks to web worker when the application encounter performance issues but NOT by the tasks' nature.

And in our case, we want it to keep track of our storage object. So let's also create a usePeristentContext hook.

No extra re-renders

turn regular custom hook into a singleton custom hook

The clientHeight property returns the inner height of an element in pixels. The property includes padding but excludes borders, margins and horizontal scrollbars.Alternatively, you can use the offsetHeight property, which returns the height of the element in pixels, including vertical padding and borders.