## Requirements - React.js ## Introduction React `memo` is used to optimize performance on you React app, it does that by wrapping components to prevent re-renderings by looking if the props received has changed. ## Problem Let's say you have this component: ```jsx import React, { useState } from "react"; const Child = function (props) { // This is re-rendering even without receiving any props return

I'm a child component

; }; export default function App() { const [localState, setLocalState] = useState(0); return (

LocalState: {localState}

); } ``` As you might expect, by changing local state pressing the `button`, you re-render `Child` component even though no state was passed to it. ## Solution To make your app more efficient you simply wrap the child component with `memo`: ```jsx import React, { useState, memo } from "react"; const Child = memo(function (props) { // This is rendering once return

I'm a child component

; }); export default function App() { const [localState, setLocalState] = useState(0); return (

LocalState: {localState}

); }) ``` Since the `Child` component was not changed or any props was passed, it won't re-render like before. ## TLDR `memo` basically [memoizes](https://en.wikipedia.org/wiki/Memoization) the component wrapped by it, if no props changed. ## Additional Resources - [reactjs.org](https://reactjs.org/docs/hooks-overview.html)

What is React memo?

Related Posts