Debugging useEffect Issues Made Simple

useEffect causes us a ton of grief. So let me show you a method that I use to figure out which useEffect is causing the problem and then which dependencies in the dependency array are the culprit. The extension is Console Ninja, and it's free.

#shorts

[ukaszrozewicz]

Struggling with useEffect, is solving problems that are not present in other JavaScript frameworks ;)

[SkylerA]

Didn't know about console ninja; that makes run away code so obvious. Great tip!

[PostMeridianLyf]

Ive only ever used one useEffect in any component. Please do more of these hook pros and cons with debugging! Lvoe them!

[lerdev]

yeah, after some issues, you learn not to use "state" and its corresponding "setState" simultaneously inside useEffect, at least not without additional conditions preventing an infinity loop )

[SysmKzz]

Using Google chrome debugger and usually add a breakpoint to the inner scope of the useEffect to be able to know when and what causes it to be stuck in a loop

[eugenex]

useEffect inside components in general creates a lot of bugs, it has been recommended millions of times to use the general states of the application for general states, and to implement local states by requesting values from the general states.

[PhucNguyen]

That's a good way. I used this way before and I could debug fast when I had error. Thank you.

[MrSca]

This is super handy! Learning a lot from you!

[hasbiassidiki]

Wow! Can you tell us what kind of extension for showing that console.log output?

[ToddsDiscGolf]

Exactly what I needed to know, thanks

[vedmack]

How did you know that you have a problem in the useEffect from the beginning?

[Elijah]

what vscode theme is that? looks awesome

[adamjamiu]

Please share me the full video of thiss

[ofadiman]

Instead of debugging useEffect I prefer to use eslint-plugin-react-hooks to fix errors before I even save the code 👍

[harryscheuerle]

pretty sure there's a lint rule for this. (when a react hook is a dep and has dispatch called)

[LbovboE]

what extension did you use for that effect on ur code for the console numbers?

[Kelz_codes]

I tend to use breakpoints and debugger ran on webstorm for most of my tricky react bugs. Step through the code and debug it.

[zatakzataks]

Con you please tell me your VScode theme name

[jmeahra]

What vs code extension we need to use for that console re rendering ?

[adamjamiu]

What is the name of this vscode extension that counts renders