React concurrent rendering explained
What Concurrent Rendering Means In this post, I try to explain what concurrent rendering means in React. First, let’s clear up a common misconception. Concurrent rendering does not mean that React renders multiple components at the same time. JavaScript is single-threaded, and React cannot change that. Once synchronous JavaScript starts executing, React cannot interrupt it. The Three Phases of a React Update React has 3 phases/steps performed on a state update 1. Render phase This is when React calls the functional component or render method. This means JavaScript is executed and React has to wait till it completes, i.e. till the function returns a virtual representation of the new DOM. 2. Reconciliation This is when React compares the current virtual representation of the DOM with the previous version, to identify the differences. It determines what new nodes needs to be added, what nodes need to be updated an...