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.
|DOM manipulation||Slow||Modifying the DOM is slow. React attempts to modify the DOM as little as possible. React builds an in-memory representation of the components we render (the element tree), and then syncs this representation to the DOM. As we update components, React will update the in-memory representation, and then make the least amount of changes to the DOM possible. This is what keeps our application fast. React does this automatically most of the time — however, we can give hints about when and how to update the DOM to improve performance. This is especially relevant when dealing with hundreds or thousands of components, in the case of large lists.|
|Component render||Fast||Components can re-render very frequently without a noticeable performance impact. It's common for |
|Very fast||In cases where a component is rendering too frequently and causing performance issues, we can use |
The examples in this guide are too small and simple for performance to be a problem, so we won't need to use
memo. React is fast by default, only slowing down in extreme cases, so we generally skip using
memo until we notice sluggish behavior in our app.