So I have been working as a mentor to a couple of junior developers for a couple of months now. It's pretty normative so far; I give them feedback on their code, small coding challenges, help them when they are blocked, etc. One of them is currently in the process of learning React, and they brought me some code they had been working on. They had been doing some research on different React functions and had taken it upon themselves to wrap all of their components in React.memo(). When I asked them about why they had done that, they responded "well, I read online that it gives your application better performance so I decided to apply it to all of my components."
This is pretty decent logic, but when prodded further it appeared that this dev didn't understand what React.memo() was doing and why it was given them a supposed performance increase. I was able to explain what was going on and sent the dev off to read about what memoization was, but it also did make me think a bit about the different functions and APIs that React has been adding. I've seen a lot of misuse of some of them, so I figured here would be a good place to talk a bit about React.memo() and when it should, and shouldn't, be used.
What is React.memo()?
For those of you who don't know, React.memo() is a higher order component used in React to memoize the rendered state of a component. A higher order component is a component that recieves another as it's argument, so this is a component that takes a component. React.memo() will run a shallow comparison of a components props, and will only re-render the component if any of the props have changed. State and Context are unaffected by this function, and should affect render cycles normally even when components have been memoized. NOTE: React.memo() only works on functional components, but Pure Components and custom shouldComponentUpdate() functions should be able to provide a lot of the same functionality.
When should you use React.memo()?
You should use React.memo() when you have a component that renders often and with the same props. Since we are memoizing the rendered state of the component, we want to cut down on re-render cycles as much as possible. If the props are rarely changing, then this is a great candidate to be memoized.
When shouldn't you use React.memo()?
Well, you basically shouldn't use it in the inverse case; when you have a component that does not render often, or with one that has props that change often. If we have a component that has changing props often, then we want to be re-rendering often and do not want to have to go to the extra steps of memoizing our component. Additionally, if our component doesn't re-render often then there is no need to save it's rendered state; it is largely static and doesn't benefit from being memoized.
At the end of the day, the same general concepts around memoization play around React.memo(). If you have already done some computational work and saving the results give you increased performance, then use memoization. However, if saving the work does not give you any benefit then it simply becomes extra work (no matter how small), and so we are actually losing performance by engaging in memoization. When in doubt, use the React profiler to see what components benefit from being memoized and which ones don't, but also recognize that blindly wrapping all components in React.memo() is not the answer!