react / memo

Function: memo()

memo(Component, propsAreEqual)

function memo<P>(Component: FunctionComponent<P>, propsAreEqual?: (prevProps: Readonly<P>, nextProps: Readonly<P>) => boolean): NamedExoticComponent<P>

Lets you skip re-rendering a component when its props are unchanged.

Type Parameters

Type Parameter
P extends object

Parameters

Parameter Type Description
Component FunctionComponent<P> The component to memoize.
propsAreEqual? (prevProps: Readonly<P>, nextProps: Readonly<P>) => boolean A function that will be used to determine if the props have changed.

Returns

NamedExoticComponent<P>

See

React Docs

Example

import { memo } from 'react';

const SomeComponent = memo(function SomeComponent(props: { foo: string }) {
  // ...
});

Defined in

.pnpm/@types+react@18.3.11/node_modules/@types/react/ts5.0/index.d.ts:1767

memo(Component, propsAreEqual)

function memo<T>(Component: T, propsAreEqual?: (prevProps: Readonly<ComponentProps<T>>, nextProps: Readonly<ComponentProps<T>>) => boolean): MemoExoticComponent<T>

Type Parameters

Type Parameter
T extends ComponentType<any>

Parameters

Parameter Type
Component T
propsAreEqual? (prevProps: Readonly<ComponentProps<T>>, nextProps: Readonly<ComponentProps<T>>) => boolean

Returns

MemoExoticComponent<T>

Defined in

.pnpm/@types+react@18.3.11/node_modules/@types/react/ts5.0/index.d.ts:1771

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.