How do you lazy-load components in React?
Model answer
Use React.lazy with dynamic import and wrap the component in Suspense: const Settings = lazy(() => import('./Settings')); then <Suspense fallback={<Spinner />}><Settings /></Suspense>. The bundler splits that code into a separate file that loads when first rendered.
Route-level splitting gives the biggest win with the least effort.
Learn this topic
React Performance: memo, useMemo, useCallback and When Not to Use Them in the course React.js Full Course: Beginner to Advanced.
Sign in to add your own answer.
More questions
- Why does a component re-render, and is re-rendering always bad?
- What does React.memo do?
- What is the difference between useMemo and useCallback?
- What is the React Compiler, and does it replace useMemo and useCallback?
- How do you render a very long list efficiently?
- Why can inline objects and functions as props hurt memoisation?