Performance Hooks - rs-hash/Senior GitHub Wiki

useMemo

useMemo is a React Hook that lets you cache the result of a calculation between re-renders.

need to pass two things to useMemo:

• A calculation function that takes no arguments, like () =>, and returns what you wanted to calculate.
• A list of dependencies including every value within your component that’s used inside your calculation.

when to use

• If a calculation takes more than 1ms, makes sense to memo that value
• useMemo won’t make the first render faster. It only helps you skip unnecessary work on updates. - CPU throttling to check if it works

Optimizing with useMemo is only valuable in a few cases:

• The calculation you’re putting in useMemo is noticeably slow, and its dependencies rarely change.
• You pass it as a prop to a component wrapped in memo. You want to skip re-rendering if the value hasn’t changed. Memoization lets your component re-render only when dependencies aren’t the same.
• The value you’re passing is later used as a dependency of some Hook. For example, maybe another useMemo calculation value depends on it. Or maybe you are depending on this value from useEffect.

In practice, you can make a lot of memoization unnecessary by following a few principles:

• When a component visually wraps other components, let it accept JSX as children. This way, when the wrapper component updates its own state, React knows that its children don’t need to re-render.
• Prefer local state and don’t lift state up any further than necessary. F
• Keep your rendering logic pure.
• Avoid unnecessary Effects that update state.
• Try to remove unnecessary dependencies from your Effects

useCallback

useCallback is a React Hook that lets you cache a function definition between re-renders.

You need to pass two things to useCallback:

• A function definition that you want to cache between re-renders.

• A list of dependencies including every value within your component that’s used inside your function.

• On the following renders, React will compare the dependencies with the dependencies you passed during the previous render. If none of the dependencies have changed (compared with Object.is), useCallback will return the same function as before. Otherwise, useCallback will return the function you passed on this render.

• lets say if we pass a function down to a child component, By default, when a component re-renders, React re-renders all of its children recursively. This is fine for components but if it's slow, we can wrap the child in memo. with this change React will skip re-rendering if all of its props are the same as on the last render. This is when caching a function becomes important! Let’s say you defined handleSubmit without useCallback: In JavaScript, a function () {} or () => {} always creates a different function, similar to how the {} object literal always creates a new object. Normally, this wouldn’t be a problem, but it means that ShippingForm props will never be the same, and your memo optimization won’t work. This is where useCallback comes in handy: By wrapping the function in useCallback, you ensure that it’s the same function between the re-renders (until dependencies change). You don’t have to wrap a function in useCallback unless you do it for some specific reason. In this example, the reason is that you pass it to a component wrapped in memo, and this lets it skip re-rendering

Caching a function with useCallback is only valuable in a few cases:

• You pass it as a prop to a component wrapped in memo. You want to skip re-rendering if the value hasn’t changed. Memoization lets your component re-render only if dependencies changed.

• The function you’re passing is later used as a dependency of some Hook. For example, another function wrapped in useCallback depends on it, or you depend on this function from useEffect.

• useCallback does not prevent creating the function. You’re always creating a function (and that’s fine!), but React ignores it and gives you back a cached function if nothing changed.

In practice, you can make a lot of memoization unnecessary by following a few principles:

• When a component visually wraps other components, let it accept JSX as children. Then, if the wrapper component updates its own state, React knows that its children don’t need to re-render.

useTransition

• useTransition is a React Hook that lets you update the state without blocking the UI. ( If we wrap a function inside startTansition, we tell react that it is low priority ) Other state updates will execute and then the setState inside startTransition will be updated. If not both will be batched together which may block the rendering

• useTransition does not take any parameters.

useTransition returns an array with exactly two items:

• The isPending flag that tells you whether there is a pending Transition.
• The startTransition function that lets you mark a state update as a Transition.