Quiz for Lazy Loading Components

Q1: What is lazy loading in React?

A. A. Loading components only when needed B. B. Loading all components at once C. C. Loading components without user interaction D. D. Loading components after page load

Q2: Which React function is commonly used for lazy loading components?

A. A. React.lazy() B. B. useLazy() C. C. lazyLoad() D. D. React.load()

Q3: How do you handle loading states when using React.lazy?

A. A. Using Suspense component B. B. Using setTimeout C. C. Using useEffect D. D. Using useState

Q4: What prop does Suspense accept to show fallback UI?

A. A. fallback B. B. loading C. C. placeholder D. D. render

Q5: Why is lazy loading beneficial?

A. A. Improves initial load time by splitting code B. B. Loads all scripts upfront C. C. Increases server load D. D. Reduces app functionality

Q6: Can React.lazy() be used for non-component modules?

A. A. No, only for components B. B. Yes, for all modules C. C. Only for CSS files D. D. Only for images

Q7: Which React version introduced React.lazy?

A. A. 16.6 B. B. 15.0 C. C. 17.0 D. D. 18.0

Q8: What must be wrapped around React.lazy components?

A. A. Suspense B. B. Fragment C. C. Div D. D. StrictMode

Q9: Can Suspense fallback be a loading spinner?

A. A. Yes B. B. No C. C. Only text D. D. Only images

Q10: Which tool can be used alongside lazy loading for route-based code splitting?

A. A. React Router B. B. Redux C. C. Context API D. D. Axios

Q11: What is code splitting?

A. A. Dividing code into smaller bundles B. B. Combining all code C. C. Minifying code D. D. Encrypting code

Q12: How does lazy loading affect SEO?

A. A. It may delay content rendering affecting SEO B. B. It improves SEO always C. C. It has no effect D. D. It blocks SEO

Q13: Which syntax is used to dynamically import components for lazy loading?

A. A. import() B. B. require() C. C. fetch() D. D. load()

Q14: What happens if Suspense is not used with React.lazy?

A. A. Error will occur B. B. It works fine C. C. Components load normally D. D. Performance improves

Q15: Can lazy loading be applied to images?

A. A. Yes, but with different techniques B. B. No, only components C. C. Yes, using React.lazy D. D. No, never

Q16: What is the primary purpose of lazy loading?

A. A. To improve user experience by faster initial load B. B. To increase bundle size C. C. To slow down rendering D. D. To preload all resources

Q17: Which React method allows loading components asynchronously?

A. A. React.lazy B. B. React.sync C. C. React.load D. D. React.async

Q18: What kind of fallback UI can Suspense display?

A. A. Any valid React element B. B. Only text C. C. Only images D. D. Only divs

Q19: Does lazy loading reduce the total size of the app?

A. A. No, it just splits loading over time B. B. Yes, it removes code C. C. Yes, it compresses code D. D. No, it increases size

Q20: How can you test if a component is lazy loaded?

A. A. Check network tab for chunk files B. B. Check console logs C. C. It is not possible D. D. By looking at CSS