What is Concurrent Rendering? (Legacy)

The Concurrent rendering makes React apps to be more responsive by rendering component trees without blocking the main UI thread. It allows React to interrupt a long-running render to handle a high-priority event. i.e, When you enabled concurrent Mode, React will keep an eye on other tasks that need to be done, and if there's something with a higher priority it will pause what it is currently rendering and let the other task finish first. You can enable this in two ways,

   // 1. Part of an app by wrapping with ConcurrentMode
   <React.unstable_ConcurrentMode>
     <Something />
   </React.unstable_ConcurrentMode>;

   // 2. Whole app using createRoot
   ReactDOM.unstable_createRoot(domNode).render(<App />);