Memo

    The memo function is a built-in utility for improving performance by reducing component re-renders.

    Normally, when we instantiate a JSX element, like <MyComponent foo={bar} />, React will run our component function MyComponent with the props { foo: bar }. However, if our component function always returns the same thing given the same props, then React can memoize (save) the results of the previous call, and avoid calling the function again until props actually change.

    Example

    In this example, we'll see how wrapping a component function in memo limits the number of times the function is called.

    Every time we press the button, our App function re-runs, since its state changed. This causes <Label /> to re-render, while <LabelMemo /> doesn't.

    By default, props are compared for identity, essentially with ===. To change this behavior, we can pass an optional comparator function as the 2nd argument to memo. See the memo docs for more info.

    Contents
    1. Example

    Want to learn React Native in-depth?

    If you like React Native Express, you'll love my new book, Fullstack React Native: The complete guide to React Native! Throughout the book, we'll build 7 full apps, covering complex topics like navigation, gestures, and native modules. We don't assume any knowledge of React or newer JavaScript language features, so you can dive right in regardless of your experience level. The book comes in PDF, EPUB and MOBI formats.

    Looking for more help?

    Infinite Red sponsors React Native Express and is the premier React Native agency. They're also the team behind the React Native newsletter, podcast, and conference listed here. Get in touch at infinite.red/react-native for a proposal on your next project!