Member-only story
Optimise React Application using Lazy Loading, Code Splitting, and Suspense
Understanding Lazy Loading, Chunking and Suspense in React and why should we use these techniques:
An application can be considered performant if the initial time taken to be interactive (TTI) is low and the time taken for re-rendering is minimal. A TTI score of 0 to 0.38 seconds is considered a good score. To have a reduced TTI we need to reduce the initial load time. Using code splitting is the first step you should consider to achieve low TTI. Other optimisation techniques like useMemo, useCallback and others are additional ways to achieve faster re-renders and hence better performance.
If your application has multiple routes, then it is only logical to not load the entire JS initially. React offers lazy loading to load the JS bundle specific to each route whenever the user hits that route. Lazy loading causes the code to be split into multiple chunks. We will learn more about Chunk analysis a bit ahead in this article. Lastly, Suspense is a way to provide a fallback UI when the lazy-loaded component is taking time to load. More about each of these is explained further.
