When you're asked which optimization techniques you know, not mentioning React.lazy would be злочином.
React.lazy() is one of the approaches to optimizing the initial page load in React. Put simply, it's an API that lets you load components only when we actually need them. It also allows components to be loaded in parallel, which significantly reduces the size of the main bundle.
In fact, React.lazy() is an implementation of code splitting in React. The main idea behind this approach is to defer loading heavy or rarely used components.
How does it work?
React.lazy() takes a function that returns a dynamic import(), and the component is loaded asynchronously. The component is loaded only once, at the moment it becomes needed. After loading, the module is cached and is not loaded again.