Q1. What is code splitting?
Code splitting is a technique to split your bundle into smaller chunks that can be loaded on demand. This reduces initial load time by loading only the code needed for the current page.
Q2. How do you implement code splitting in React?
React.lazy allows you to dynamically import components. Example: const LazyComponent = React.lazy(() => import('./MyComponent')). Then wrap it in }> to show a fallback while loading.
Q3. What is React Suspense?
Suspense is a component that lets you specify a fallback (like a loading spinner) while waiting for lazy components to load. It works with React.lazy and is also used for data fetching in concurrent mode.
Q4. What are the benefits of lazy loading?
It improves performance by reducing the initial bundle size, leading to faster time-to-interactive. Users only download code for the features they use, especially beneficial for large apps.
Q5. Can you lazy load components based on routes?
Yes, you can lazy load route components. For example, using React.lazy for each page component and wrapping routes with Suspense. This is common with React Router.