top of page
Logo der Online Agentur mdwp

React.memo()

React.memo() is a higher order component in React JS. It aims to optimize the performance of functional components by memoizing the rendered output, thus reducing the rendering cost of components.

Let's say, you have a functional component that always renders the same result given the same props, you can wrap it in a call to React.memo for a performance boost in some cases by memoizing the result. This means that React will skip rendering the component, and reuse the last rendered result.

Here's a simple example:

```
const MyComponent = React.memo(function MyComponent(props) {
/* a complex computation here */
return <div>{props.someProp}</div>;
});
```

In this example, `MyComponent` will only re-render if `props.someProp` changes. This is particularly helpful when the component is rendering a complex computation that doesn't need to run on every render, especially when props are the same. Therefore, React.memo() optimizes our component by avoiding unnecessary re-rendering.

bottom of page