Front end frameworks like Angular, Vue, React  helps developers to build apps with great UI and UX. Even though these frameworks offer a high performance and native experience the apps created by these frameworks has some similar inherent problems. Those are race conditions, many spinners, blocking of rendering. Race conditions occur when a page needs multiple inputs and it is unable to fully load when some of the inputs get delayed. We have seen temporary placeholders instead of original content when a page is being fully loaded. These kind of pages will display multiple spinners until data is available to load. These frameworks update changes to Virtual DOM and then patch up the screen accordingly. . The blocking of rendering happens in the cases where the apps do this before all data has been fetched. Each time data is fetched the Virtual DOM is updated and screen is repainted which causes other threads to wait unnecessarily.

                                                Concurrent Mode is a feature that has been added to React lately. It helps React apps to be responsive and adjust to the user’s device capabilities and the network speed. It is developed to overcome the above limitations. It is an experimental feature so it can be changed in future. In concurrent mode blocking rendering doesn’t happens but it is interruptible. This will improve the UX.  Concurrency is a way to structure the program by breaking it into pieces that can be executed separately. This way we can  break the limit of using a single thread and make our application work better. Concurrent will let React not block the main thread, to work on multiple tasks at a time and toggle between tasks according to priority, and partially render a tree without committing the result. To prioritize user inputs and then render the huge grid we have useDeferredValue.  This wraps a prop/state value and receives the maximum defer time.  Another feature is suspense for data fetching. This feature allows us to show a placeholder while waiting for a code split part of the page. It works on anything that uses promises. SuspenseList is a component to wrap other Suspense components with. It tells react when to display a loaded component. The new hook called useTransition will allow us to wait for data to be ready before flushing the dom.