Call Render Again on State Change Flux

May 17, 2022 Post a Comment

5 Means to Avoid React Component Re-Renderings

How to Avoid Unnecessary Re-rendering in React

React components accept evolved a long fashion from their inception. Notwithstanding, many developers find it hard to set unnecessary re-renderings. Even so, there are many approaches out there to avoid this consequence.

In this article, I will discuss v methods to avert unnecessary re-renderings in React components.

1. Memoization using useMemo() and UseCallback() Hooks

Memoization enables your code to re-return components only if there's a change in the props. With this technique, developers can avoid unnecessary renderings and reduce the computational load in applications.

React provides two Hooks to implement memoization:

useMemo()
UseCallback()

These Hooks reduce re-renderings by caching and returning the aforementioned result if the inputs are the same without whatever computations. When the inputs modify, the cache gets invalidated and the new component land gets rendered.

useMemo()

To understand how we can use the useMemo() Hook, let's consider an case of multiplying 2 numbers.

            const multiply = (x,y) => {
              return x*y
}

The above function will compute the upshot and re-render the component each time it is called, regardless of the inputs. But, if we utilise the useMemo() Hook, we tin avoid component re-rendering if the inputs are the same and save the effect in the cache.

            const cachedValue = useMemo(() => multiply(x, y), [x, y])

At present, the computed effect is stored in the cachedValue variable and useMemo() Hook will return it each fourth dimension unless the inputs are changed.

UseCallback()

UseCallback() is some other React Hook to implement memoization. Simply, different useMemo(), it does not cache the result. Instead, it memoizes the callback function provided to information technology.

For example, consider a component with a clickable item list.

            import { useCallback } from 'react';            export function MyParent({ term }) {                          const onClick = useCallback(event => {
              panel.log('Clicked Item : ', event.currentTarget);
              }, [particular]);                          return (
              <Listitem={item} onClick={onClick}
              />
              );
}

In the to a higher place example, useCallBack() memoizes the onClick callback. So, it volition not re-render the component if the user clicks the aforementioned particular once again and again.

2. API Telephone call Optimization with React Query

It'due south mutual to utilise the useEffect() Hook for asynchronous data fetching operations in React applications. However, useEffect() runs and fetches data on each render, and in nearly situations, information technology keeps loading the aforementioned information.

Equally a solution, we can utilize the React Query library to cache the response data. When we make an API call, React Query will first render the data from the cache before continuing with the asking. Then, it volition recollect the data from the server, and if there is no new data available, it volition prevent the component from re-rendering.

            import React from 'react'
import {useQuery} from 'react-query'
import axios from 'axios'            async part fetchArticles(){
              const {data} = wait axios.go(URL)              
              return data
}            function Articles(){
              const {data, error, isError, isLoading } = useQuery('manufactures', fetchArticles)                  if(isLoading){
                return <div>Loading...</div>
                }
                if(isError){
                return <div>Fault! {fault.message}</div>
                }
                return(
                <div>
                ...
                </div>
                )
}
consign default Articles

React Query library has more than 600K weekly NPM downloads and 1.3K+ GitHub Stars.

3. Creating Memoized Selectors with Reselect

Reselect is a tertiary-political party React library for creating memorized selectors. Information technology is commonly used with Redux stores and has amazing features to reduce unnecessary re-renderings.

Reselect selectors are capable of computing derived data.
Reselect selectors do not recompute unless their arguments are changed.
They tin can be used every bit inputs to other selectors.

Reselect provides an API named createSelector, and it tin can generate memoized sector functions. For better understanding, allow's consider the case given beneath.

            import { createSelector } from 'reselect'              
...
const selectValue = createSelector(
              land => land.values.value1,
              state => land.values.value2,
              (value1, value2) => value1 + value2
)
...

Hither, the createSelector takes 2 selectors as the input and returns the memoized version. Selectors volition not be computed again with this memoized version until the values are inverse.

Reselect library has more than than 2 Meg weekly NPM downloads and 18.4K+ GitHub stars.

4. Supervene upon useState() with useRef()

useState() Hook is widely used in React applications to re-render the components on state changes. However, there are scenarios where nosotros need to track state changes without re-rendering the components.

But, if nosotros utilize the useRef() Hook, we can rails the land changes without causing component re-renderings.

            function App() {
              const [toggle, setToggle] = React.useState(false)
              const counter = React.useRef(0)
              console.log(counter.electric current++)
              return (
              <button onClick={() => setToggle(toggle => !toggle)} >              
              Click              
              </push>
              )
}
ReactDOM.return(<React.StrictMode><App /></React.StrictMode>, document.getElementById('mydiv'))

The above example has a toggle that re-renders the component each time the value changes. Merely the counter persists its value since it is a mutable ref. Since we are using useRef(), it will only cause a single render. Yet, if we apply useState(), it will crusade 2 renders for each toggle.

five. Using React Fragments

If you have worked with React before, yous will know that React requires wrapping the components with a single parent element. Though it's not directly about re-rendering, accept you known that it affects the overall component rendering time?

As a solution, you can use React Fragments to wrap the components, and information technology will reduce the load on the DOM, resulting in faster rendering times and decreased memory usage.

            const App= () => {
              return (
              <React.Fragment><p>How-do-you-do<p/><p>World<p/></React.Fragment>
              );
};

Conclusion

In this article, I have discussed 5 different methods to prevent unnecessary re-rendering in React components. Most of these solutions capitalize caching, and yous tin can use inbuilt React Hooks or third party libraries to implement them.

In addition, these methods will improve your application performance to forestall unnecessary re-rendering while reducing the memory overhead.

I hope you have found this useful. Thanks for reading!

Build composable web applications

Don't build web monoliths. Use Fleck to create and compose decoupled software components — in your favorite frameworks like React or Node. Build scalable frontends and backends with a powerful and enjoyable dev experience.

Bring your team to Scrap Cloud to host and collaborate on components together, and greatly speed up, scale, and standardize development as a team. Start with composable frontends like a Blueprint Organisation or Micro Frontends, or explore the composable backend. Give it a try →