Under the Hood of React: Understanding Re-rendering and Diffing

React is a popular JavaScript library for building user interfaces. One of the key features of React is its ability to efficiently update the view when the underlying data changes. This is achieved through a process called re-rendering and diffing. In this article, we’ll take a closer look at how this process works and how you can optimize it to improve the performance of your React applications.

Re-rendering in React

In React, every component has a render() method that is called every time the component’s state or props change. With functional components, we use hooks to manage the state, and the component re-renders every time the state or props changes.

The useEffect hook allows us to synchronize a component with an external system, and it is similar to componentDidMount, componentDidUpdate, and componentWillUnmount in class components.

const [count, setCount] = useState(0);
 
useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);