1. Stop Re-render and React.memo

React.memo is a function that optimizes the way your components are rendered and used in a functional component.

In particular, it performs a process called memoization that prevents components from re-rendering when they don’t need to (this is defined in more detail in the useMemo section).

React.memo is most helpful in preventing the list of components from being re-rendered when their parent-components re-render.

React.memo () is a HOC (Higher-Order Components), not hooks. Mechanism works like a Pure Component (used a lot with Class Components).

React.memo () will only re-render the component if the props change and use the shallow comparison pattern. (When the component becomes complicated, another pattern called shallow comparison can be compared to all the properties of the props and state to decide if this component needs to update or not)

For example:

In the above example, there are two states, ‘skill’ and ‘skills’. A function that displays skill list is “SkillList” and can add or remove skills from the list.

The problem here is that every time you input a new skill, the state will be updated and the SkillList component will continuously re-render and cause the performance to decrease.

However, when wrapping the SkillList component in React.memo (which is a higher level function (HOC), which means it accepts a function as an argument), it will no longer render unnecessary views when the parent component is reworked. render.

2. Memoization and useMemo

When the Memoization process is done, it will compute and save the results for each set of inputs and when it meets the previously executed input set, it will stop computation but return available results.

useMemo very similar to useCallback and is useCallback to improve performance. But instead of being used to callback, useMemo is to store the results of resource-intensive calculations.

useMemo allows us to memoize , or remember the result of, a complex calculation when it was performed.

useMemo returns a value from a calculation, which is then stored in a variable.

useMemo creates a memoized value and only computes new values ​​when dependencies change. It takes 2 parameters, function and dependencies. It returns memoized value and only calculates new value when dependencies change. If you use empty dependencies, never recalculate the new value.

For example:

From the example in React.memo () above, we add the SearchSkills function to check performance when using useMemo

For example, for the above example there will be thousands of skills that we can search. So how to effectively find and display the right skills for a search term when the user enters input?

Use React.useMemo to memoize (remember) the return value from the search action and only run when it changes searchTerm (state).

3.Callback functions and useCallback

useCallback is a hook used to improve component performance. Callback functions are the names of the functions “called” in a parent component.

useCallback helps to create a memoized callback and only create new callbacks when dependencies change. It takes 2 parameters, “function” and “dependencies”. It returns a memoized callback

useCallback only creates new functions when dependencies change. If you use empty dependencies, never create a new function.

useCallback is functional in a way similar to how React.memo works. It memoize the callback function, so it is not recreated on every render.

For example:

Each time SearchSkill re-render will create a new function and FormMik is re-rendered

Each time SearchSkill re-render due to useCallback () it only creates the function once and FormMik is not re-rendered.

4. Summary

• React.memo () is an HOC, not hooks.
• Memoization is to return the results once performed without having to recalculate. Save resources and time for heavy computational processing.
• useCallback and useMemo are two methods of applying memoization technique that should be used in react hook. However, it should apply to renderings that are graphs, graphs, animations, or render-heavy components like re-rendering of page results when searching.

Thank you for following the article here. Good bye and see you again!!!

Reference link: https://www.freecodecamp.org/news/react-cheatsheet-with-real-world-examples/