Key Concepts

Review core concepts you need to learn to master this subject

The React Profiler

The React profiler browser extension allows developers to record a session while using a React app in development mode. Once recorded, the profiler displays a flame graph, alongside other information on how React rendered each component.

React Optimization
Lesson 1 of 1
  1. 1
    People love when their apps are fast and web apps are no exception. However, as applications grow they can start to feel sluggish. In response, we can apply techniques to reduce unnecessary renders…
  2. 2
    When React loads a component, it not only renders the JSX code but also evaluates all of the code and functions inside the component. Some components require functions that take a long time to exec…
  3. 3
    The useMemo() hook memoizes values returned by expensive functions. But what if we have an expensive React component that is re-rendered even though its props do not change? When React detects a …
  4. 4
    React provides us with one more memoization function: useCallback(). Again, React will recreate all code defined inside a component when it is re-rendered, including functions. useCallback() allows…
  5. 5
    There’s another category of techniques to make our apps faster, which involves only sending the necessary parts of our React code when the user needs them. This is called code splitting. When …
  6. 6
    As our apps grow, we may start to create React components that are filled with complex logic and functionality, like a component to present a map with driving directions. This component would be la…
  7. 7
    When we load a component like with React.lazy(), the component will download as its own chunk separately from the main bundle. However, React won’t be able to render the component separately …
  8. 8
    React apps are fast by default, however, when they become slow, we can identify performance bottlenecks and apply optimizations to make our apps faster. To identify performance bottlenecks, we can…

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo