Simulate PureComponent with a React Function Component

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

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

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 :)

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

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

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}.