Scribd
Upload
5 views

Learn Advanced React_ Advanced React_ Optimization Cheatsheet _ Codecademy

The document covers advanced React optimization techniques, including the use of the React Profiler for analyzing component rendering performance. It explains memoization using useMemo() and useCallback() hooks, as well as higher order components and code splitting to improve app efficiency. Additionally, it introduces the Suspense component for handling lazy-loaded components in React applications.

Uploaded by

Abhilash R Sivadas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Learn Advanced React_ Advanced React_ Optimization Cheatsheet _ Codecademy

The document covers advanced React optimization techniques, including the use of the React Profiler for analyzing component rendering performance. It explains memoization using useMemo() and useCallback() hooks, as well as higher order components and code splitting to improve app efficiency. Additionally, it introduces the Suspense component for handling lazy-loaded components in React applications.

Uploaded by

Abhilash R Sivadas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Cheatsheets / Learn Advanced React

Advanced React: Optimization

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.

The React profiler flame graph

A flame graph in the React profiler displays all


components that were rendered during a session.
Components that took longer to render are displayed in
yellow, while ones that took less time to render are
displayed in blue.

Memoization

Memoization prevents rerunning expensive operations by


returning a cached result when given the same inputs as a
past operation.
Memoizing values

React provides the useMemo() hook to memoize


values. It takes two arguments, a function that returns a
value, and a list of dependencies. Given the same list of
dependencies, useMemo() will return a memoized
value.

Higher order components

A higher order component is a component that takes in a


component, adds functionality, then returns a new
component with extra functionality.

Memoizing React components

React.memo() memoizes a React component. It import React from 'react';


takes a React component as an argument, then when
given the same props, it will prevent React from re-
rendering the provided component even when its parent const MemoizedComponent = React.memo(() =>
re-renders. {
return <div />
});

Memoizing functions

React provides the useCallback() hook to import { useCallback } from 'react';


memoize functions. It takes two arguments, a function,
and a list of dependencies. Given the same list of
dependencies, useCallback() will return a // ...
memoized function.
const memoizedFunction =
useCallback((number) =>
formatNumber(number), []);
Code splitting

Code splitting is the act of separating code from the main


JavaScript bundle in a React app to allow the main bundle
to be smaller which usually reduces download, parsing,
and execution time.

Chunks

When a library or a component is split out from the main


JavaScript bundle.js file, it is called a chunk.

Code splitting a module

The import() function imports a module while const largeModule =


instructing the bundler to create a separate chunk for the
import('./largeModule.js');
imported module. import() takes one argument,
which is the path of a module. import() returns a
JavaScript Promise.

Code splitting a component

The React.lazy() function imports a React const LargeComponent = React.lazy(await ()


component while instructing the bundler to create a
=> import('./LargeComponent'));
separate chunk for the imported component.
React.lazy() takes one argument, a function that
returns an import() , which takes a path to a React
component as its argument.
Suspense

The <Suspense> React component wraps import { Suspense }, React from 'react';
components imported with React.lazy() .
<Suspense> instructs React to load the rest of the
React app and to display a loading state while the React const LargeComponent = React.lazy(await ()
component is downloaded and rendered. => import('./LargeComponent'));
<Suspense> takes one prop named fallback ,
which is a React component shown while its lazily loaded
children are unavailable. const Page = () => {
return {
<Suspense fallback={<p>Loading...
</p>}>
<LargeComponent />
</Suspense>
}
};

Print Share

You might also like