Despite React's popularity, one of its main shortcomings is the excessive re-rendering of its components. You might have noticed that state updates don't always immediately reflect modified values when creating React applications. React state is a straightforward JavaScript object that contains data that affects how a render appears.

If you want to change any characteristics of a React component in the future, you should store the attribute in a state while building your project. The state is first set to a default value upon mounting, and later changes are brought about by user actions. Internally, each React component controls its own state.

In this post, we'll examine the causes of React's delayed state update. When you need to make modifications with function components, we'll go through an example and explain what you should do. Let's start now!

How state changes get handled by React

State updates in React are asynchronous; when an update is requested, there is no guarantee that the updates will be performed immediately. The update functions queue changes to the component state, but React can delay changes and update multiple components in a single pass.

for example:-

//React
const handleClick = () => {
      setName("Amaka")
      setAge(20)
      setAddress("No 3 Rodeo drive")
}

In the code snippet above, there are three different calls to update and re-render the component.

In most cases, it would be inefficient to call the update functions one after the other and re-render both the parent and child components after each call. For this reason, React batches state updates.

No matter how many setState() calls are in the handleClick event handler, they will produce only a single re-render at the end of the event, which is crucial for maintaining good performance in large applications.

The order of requests for updates is always respected; React will always treat the first update requests first.

Carrying out operations with function components

useEffect() Hook

You can perform side effects in the useEffect Hook when the state is updated. The state variable could be added as a dependency in this Hook, making it run when the state value changes. You can make the useEffect Hook listen to the state changes:

//React

import React,{useState, useEffect} from 'react';

const App = () => {
  const [count, setCount] = useState(1);

  useEffect(() => {
    if (count > 5) {
      console.log('Count is more that 5');
    } else {
      console.log('Count is less that 5');
    }
  }, [count]);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>{count}</p>

      <button onClick={handleClick}>
        add
      </button>
    </div>
  );
};

export default App;

The callback function in the useEffect Hook runs only when the state variable provided as a dependency changes.

Conclusion

In React, every state update causes the component being updated to re-render. Because re-rendering is an expensive operation, making state updates synchronously can cause serious performance issues, for example, increasing load times or causing your application to crash. By batching state updates, React avoids unnecessary re-renders, boosting performance overall. I hope you enjoyed this blog!