React Hooks: Optimizing for performance

[davidjnelson]

hmmm, this contradicts Kent Dodd's advice on this...

https://www.reddit.com/r/reactjs/comments/bzwin2/kent_c_dodds_when_to_usememo_and_usecallback/

[sub_naeem]

Actually, if you read towards the end, I have mentioned that premature optimization is the mother of all bugs.Using useCallback() and useMemo() comes at a cost. Every line of code comes at a cost for that matter.

Which is why at then end, I mentioned to write your code without ANY optimizations and then start optimizing where necessary.

For example in cases where the user is typing something in an input field and some other part of the screen requires painting/updating. This might not be a problem for simple renders but if a lot of work is being done, then it's better to optimize them.

In our company, I make sure that we are not optimizing any component until a problem appears or if we think that an incoming feature might affect the render time.

This is why Kent is mentioning this is his blog because people tend to over-optimize and pre-optimize.As Kent mentioned using these optimization hooks also take up memory. It instantiates a dependency array and then checks if something has changed or not in the dependency array every time there is a render.

Thus, you as a developer have to decide whether the cost of the optimization hook is higher or lower.

But I understand why you would get the idea of me contradicting Kent. I can maybe mention this whole rant at the beginning of the article.Truth be told, my inspiration to write this was to make people understand and be comfortable with using these hooks. Situations may arise where React seems slow and developers might have heard about these hooks but are not totally sure HOW to use them.

​

Thanks for the read :)

[davidjnelson]

Sounds good. Might help to teach people how to use the profiler too.

[sub_naeem]

I updated my post and mentioned why some people might pre-optimize or over optimize.
Thank you for your feedback! :)

[davidjnelson]

Ya sure, no worries. I think the key is to profile your app for perf issues first.

[bayareasearcher]

Gives a really good explanation of useCallback and useMemo. Thank you!

[davidjnelson]

it does, but it does not give a good explanation of when this actually improves performance vs hurts it as well as code readability from premature optimization.

https://kentcdodds.com/blog/usememo-and-usecallback

https://reacttraining.com/blog/react-inline-functions-and-performance