Performance

    React is built for performance; React is used to build massively complex interfaces with thousands of elements, each one potentially responding to user interaction.

    Because performance is so fundamental to React, it can be helpful to understand the performance model of various operations at a high level.

    Performance model

    Operation
    Cost
    Description
    Native UI manipulationSlowReact attempts to modify the native UI as little as possible.
    Component renderFastIt's common for component functions to be called many times as the props of a component change. We often call this rendering. Components can re-render very frequently without a noticeable performance impact.
    Comparing propsVery fastIn cases where a component is rendering too frequently and causing performance issues, we can limit the amount of re-renders by only re-rendering when props actually change. We'll cover this in more detail in the next section.

    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!