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.
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,
TodoList, If I removed
TodoItem, it still re-rendering every time I type something in NewTodo input.
useCallback? Because I saw
Aboutcomponent, also re-rendering every times I types, ... I have to add both React.memo to
Aboutand also use
onCloseprop, 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 :)
Great questions. I like the idea of using
memo with the 2nd argument vs using
memo without the 2nd argument and using
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.
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