This One Line Of Code Catches React Bugs For You

StrictMode in React was a bit controversial when it was first introduced because of how it impacted how nearly everything in React works when in development. This was quite confusing at first, but over the years since StrictMode has launched React introduced many changes to help streamline the process. In this video I talk about what StrictMode is, what it does for you, and why it is crucial to writing clean React code.

📚 Materials/References:

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:45 - What Is StrictMode
02:12 - Detect unintended side effects
09:12 - Detect mount/unmount side effects
12:01 - Detect deprecated class lifecycle methods
13:13 - Detect string refs
14:22 - Detect findDOMNode usage
15:05 - Detect legacy context

#ReactJS #WDS #StrictMode

[matiasvaldez]

Amazing video! Would love to see one about react server components explained by you 😁

[jpisello]

Now I finally understand why my components mount/unmount/mount!

[amit.pawase]

As a web developer, I feel that I need to focus on react internals more than on business logic. 😢

[harag]

on the useEffect running twice issue - isn't that then going run my fetch commands twice in development mode? just like it's creating the eventlisten twice (then removing the 1st one), how do we do this when we use .fetch to get data from the API in useEffect?

[Ayomikun]

Thanks Kyle, great video as always.

I am a little confused / unsure about a couple of things though. In that first example with the reducer. If the toggle admin gets triggered twice, then surely the isAdmin state would never change? As isAdmin = !isAdmin gets called twice?

Also, with the use effect example, are we now just supposed to accept that the effect runs twice, and you see that console log twice? What if instead we were logging out to a file, or communicating with an API, we'd just have to do those actions twice every time? Feels a little... off

Thanks

[hexada_ghostemane]

do you recommend DeepScan visual studio code-extension?

[appledore]

Nice educative video about strict mode.

I had a doubt about it however, hopefully someone can help me out clear it.
So, I basically remove strict mode in every project because it sends duplicate API requests. I’m calling those requests via async await event handlers on events like click and what not. So am I doing it correctly or should I implement some sort of logic to cancel (like clean up) sent requests? I’m relatively new at react so I would appreciate any help clearing this.

Thanks in advance.

[augustine_codes]

How can the issue of having unintended side effects be fixed?

What can be done to avoid functions running twice?

[EnglishRain]

I used to always delete StrictMode lines lol

[noredine]

Is it safe to say that strict mode code is compatible with non-strict mode, but not vice versa?

[thupilcharwaka]

Foes this work of React Native app also ?

[IkeVoodoo]

I don't use react, but this is really nice to watch!

[EliKennedy]

Oh man I was wondering why my log statements started doubling

[IIdo.]

hey, web simplified. I have a favor, can you please make an tutorial about how to convert big numbers into like this 1e^6 it's for my project game and I don't know how to do it here's the problem in my game the problem is if the number reached 100 trillion the space in the screen will get overlapped and I don't know how to fix it, i just wanted if it reaches 10-50trillion it should've been like 1e^13 it doesn't give the code i want can you please do an tutorial on it, Thank's!

my game is clicking game,
and i am on mobile, if you ask.

[adam_la_morre]

Can you please do a hair-styling tutorial? Guaranteed to get over 1 billion views 👍

[TRICpitator]

oh damn, didn't know React had also strict mode

[coleogden]

Hey kyle could you simplify deployment of MERN web app on AWS..? Okay cool 👍

[freespeech]

Can u make react video in 30min. Very basics. Why people call it reducer. As thought its some big magic. Bad naming convention

[shreyasnair]

Wait what, i thought all react apps are in strict mode by default? Because all type module files are in strict mode by default and react app has strict mode for all.
What? Im lost, can someone help

[DanZ-fqqs]

does anyone actually keep this in development ??? its so confusing and I don't find it helpful.