Simulate PureComponent with a React Function Component

Share this video with your friends

Send Tweet

Historically, only Class Components could extend PureComponent or implement their own shouldComponentUpdate method to control when it's render was actually invoked. However, now you can use React.memo HOC to provide this same type of control with Function Components. This isn't specific to Hooks, but was released in React 16.6 and complements the hooks API.

Viktor Soroka
Viktor Soroka
~ 6 years ago

Great lesson. Showing multiple options for solving the problem is definitely helpful.

David
David
~ 6 years ago

Awesome lesson! Thanks! I was wondering how would you use memo if you had to compare couple of values... I have this codesandbox https://codesandbox.io/s/p2pnwp6pom and a FieldContainer that should rerender if the name value changed and errors array has been updated on input blur... Cant figure this one out... Would appretiate your help! Thanks

Zhentian Wan
Zhentian Wan
~ 6 years ago

Great lesson! I still have few questions after watching the lesson,

  1. is that true, for function component, it is better to wrap with React.memo()? Because even after using useCallback in TodoList, If I removed React.memo from TodoItem, it still re-rendering every time I type something in NewTodo input.
  2. is that ture, for every callback function I use, I need to wrap with useCallback? Because I saw About component, also re-rendering every times I types, ... I have to add both React.memo to About and also use useCallback on onClose prop, then it gets better.

It gives me feelings that every times I should wrap function component with React.memo() and use useCallback whenever necessary... I am not sure whether that is true of not. Thanks for help :)

Elijah Manor
Elijah Manor(instructor)
~ 6 years ago

Zhentian,

Great questions. I like the idea of using memo with the 2nd argument vs using memo without the 2nd argument and using useCallback.

As for your second question, If you want to bail out of the render phase you'll need to use memo with or without the 2nd parameter. memo (1 arg version) is very similar to PureComponent that you use with classes so you need to be careful that the props don't change... so you can useCallback to help with that. If you do have callbacks I'd rather use the 2nd argument of memo to just target the parts I care that are changing.

Some might consider this a pre-optimization and might wait until they see degradation in their app speed before going into such optimizations. Even if React runs your render, it'll compare the output with the Virtual DOM to see if any real changes are needed when it updates the DOM.

I hope that helps

Elijah Manor
Elijah Manor(instructor)
~ 6 years ago

Viktor, thanks I'm glad you found the various solutions helpful! Often times there are many ways to do the same thing.

Elijah Manor
Elijah Manor(instructor)
~ 6 years ago

David,

That's an interesting one. In the case of your FieldContainer the value that you are typing ends up populating the FieldContainer with a new value, so your memo 2nd argument is always different because it needs to update the Field={value}.