Common React Mistakes: useEffect - Part 1

Let's work through some common mistakes when using React's useEffect, useCallback and useMemo hooks (or not using them), and also their tricky dependency arrays. We will even come up with a helpful list of rules to live by.

Hope you folks enjoy this!
👉 If you enjoy this video, please like it and share it.

💢 Watch our other videos:

Thank you for watching this video, click the "SUBSCRIBE" button to stay connected with this channel.

#reactjs #useEffect

[xq_nemesis]

I’ve read some articles about using useCallback and useMemo on non expensive functions only decreases performance because you load more into memory then actually needed. I.e. not “optimizing” would have led to better performance. Do you agree with this?

[Niamudeen]

I'm a React Js developer but i have l learnt so many new things. Thanks Jack. ✌

[ramoncardenas]

I run into these problems every time I'm working on a react project. This one video is probably gonna save me a ton of time moving forward. Thank you!

[HadeFX]

Hey Jack, recently discovered your channel. I have started a new front end project involving TS, React, Chakra UI and MobX. The content you're making at the moment is so relevant to me!!! Finding it really helpful. Keep up the good stuff, thanks

[gabrielmessiasdarosa]

Hey, im from Brazil. Thanks for making these videos. I improve my code in React significantly every time i watch your tips. Thanks a lot ! Great work !

[BezzantSam]

When I get discouraged about my skills learning React I can think back to learning guitar and bass. My fingertips hurt, I had to practice a lot for very little result. Eventually with a lot of hard work I was able to start playing some of the riffs and solos I so admired.

[PfalzerGbr]

Great video, it put these hooks in a little bit different perspective. It was nice starting from a broken app, and then break it again. Good to see the moving parts. Subscribe and bell button pressed :D

[BezzantSam]

Was surprised by the colors and background of this episode but I like it.

[mehdiwadoud]

you provide one of the greatest programming content, Thank you so much

[julian_pp]

Thanks you Jack, I would like to have a teacher like you!!! Your are a great young Master!!!

[vnm_]

I really like how you explain, you are great, keep up with the good work! Thank you for doing this! :)

[junzhongloo]

Your videos are truly amazing dude. Keep it up !!!

[zkayable]

Real good content, as always. I wish it was with typescript though

[amoljoshi]

Awesome content Jack! So much learning condensed to 15-20 minutes. I would love to watch a video on some complex use cases of `useEffect`. For eg. 1. calling an API on on initial render -> saving that in state -> based on some interaction call the API again -> update state. 2. how many `useEffects` are too many? 3. Shortcomings of `useEffect` (where you need to end up using additional libraries like `react-use`). Thank you again for making fun videos

[shubhamh]

This is a perfect sum up video, thank you!

[renanfilipe]

Thanks for the video! How about a video showing how to use the react profiler chrome extension? In this video, you can show how useCallback and React.Memo are used to avoid unnecessarily renders

[subhashgn]

Very grateful to you.
It is really helping me to master the react.

[matthewlefevre]

Thanks Jack! I don't ever use useCallback or useMemo. This video helped me to understand them better. As far as rules go: I tend to always pass a function when setting the value of useState just feels right for me.

[sheneshperera]

Hey Jack, awesome vid as always! Could you perhaps raise the zoom level of the code so it's a little easier to read on touch devices? Would be great if you could :)

[jasonadams]

Nicely done! I was admittedly hoping you were going to touch on the pitfall of using objects and functions as dependencies. Many people run into that not realizing that objects change even if they are equivocally the same.