Introduce

Hello, wandering online and I found a pretty good and useful article and decided to translate it to share for readers and for myself, the article pointed out many errors that I often encounter when do it with React .

This article will provide you with a few easy ways to improve performance for React. It is not necessary to apply the following, but it is better if you know it and apply it when necessary.

content

1. Utilize render bail-out techniques

Whenever the parent component updates, the child component will also update according to whether the props have changed or not. This means that the child component still holds the props as before, it will still render. This obviously takes a lot of processing time, especially for large component trees , because React basically applies the diffing algorithm to check the value of the changed computed tree .

You can easily avoid it by using React.PureComponent , take advantage of shouldComponentUpdate or include components in memo (Higher-Order Component). This way you can make sure that the component only updates when the props are changed.

But also remind you that doing this with a small component is not beneficial, can slow down the application a bit (because react will have to compare each time rendering the component). As such, this technique should be used for “heavy” components.

Avoid using for small components, if necessary, split large components into many small components to combine with memo() .

2. Avoid inline objects

Every time inline an object , React creates a new reference for this object on each render. This causes the receipt of this object as a new object. Thus, the shallow equality in this component’s props will return false with every render.

This indirectly references the inline styles that many people often use, me too: v. Inlining styles props in the component will force component and will always render (unless you use shouldComponentUpdate() ), which can lead to performance issues, depending on whether the component wraps the children or not.

This is a pretty good trick to use if a different reference is required. For example, it is created inside map() , whenever object properties are primitives (not functions, objects or arrays) or non-primitives with "fixed" references , you can pass them as props instead. How to pass objects without them as a single prop. Doing so will allow the component to benefit from bail-out rendering technology by comparing the old and the new prop.

You cannot benefit from React.PureComponent or memo() if you use inline style (or in general objects). In certain situations, you can spread contents of the object and pass them as props to the component.

3. Avoid anonymous functions

Since anonymous functions are a good way to pass function prop (especially if you need to invoke with other props as their parameters), they refer to the difference each time they render. It is similar to the inline object mentioned above. To maintain the same reference to the function you passed as a props in the component, you can either declare it as a class method (if you use class-based component) or use useCallback hook to keep the same reference. (if you use functional components). For times when you need a different reference for each set of parameters that your function is called (such as the calculation function inside map() ), you can check out a lot of memoize functions (such as memoize of lodash). It will call the function caching or listener caching and help you use the reference with a dynamic number of anonymous functions at the cost of the browser memory.

Of course the inline function is the easiest and doesn’t really cause a performance problem. This may be because you use it with a lightweight component or the parent component does not re-render the entire content every time the props change.

The last important thing is the anonymous function render props by default. When you use the function as a component’s children , you can define it outside the main component, so that it will always be fixed refernce.

Try and bind function props to the method or use useCallback much as possible to benefit from the bail-out rendering technique.

4. Lazy load components that are not instantly needed

It may not be relevant to the article, but the fewer components that are mounted, the faster they will mount. So, if your initial initialization is difficult, you can reduce the amount of clutter by loading the components as needed, after the initial mount has finished. At the same time you will reduce bundles and allow users to load faster. Finally, by splitting initial rendering, you are dividing the workload into smaller tasks. You can learn React.Lazy as well as React.Suspense .

Trying and lazy-loading components is not really visible (or necessary) for users until they interact with them.

5. Tweak CSS instead of forcing a component to mount & unmount

Rendering is “expensive”, especially when the DOM needs to be changed. Whenever you have some kind of accordion or functionality tab – where you only see one item at a time – you may want to disconnect the unmount component and not see it and re-mount when it shows up. .

If component mounted / unmounted is heavy, this action may be more costly than necessary and lead to lagginess, in which case, you can push it via CSS, while keeping the content for the DOM. Recognize that sometimes it is not possible because you may encounter cases where those mounted components may fail, but you should choose to do this when possible.

opacity to 0 is almost resource-free for the browser (because it does not cause reflow) and should give visibility and display whenever possible.

Instead of hiding components via unmouting, sometimes it can be useful to hide via CSS while keeping components mounted. This will greatly benefit heavy component with significant mount / unmounting time.

6. Memoize expensive calculations

Sometimes rendering is not necessary, but the component is a functional, rendering happens with any component calculation. Calculations with a constant value with each render can be memoized using the useMemo() hook. You can find out more via this link .

The goal is to reduce the JS workload when rendering, so the main thread will be blocked in less time.

summary

Above are some useful tips for you when working with ReactJs, thanks for reading all the articles and do not forget to upvote or clip the article supporting me. Happy coding !