This One Line Of Code Catches React Bugs For You

FREE React Hooks Simplified Course: courses.webdev...
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:
FREE React Hooks Simplified Course: courses.webdev...
🌎 Find Me Here:
My Blog: blog.webdevsim...
My Courses: courses.webdev...
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/Web...
CodePen: codepen.io/Web...
⏱️ 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

[@matiasvaldez370]

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

[@DEV_XO]

Amazing mate! Thanks!

[@jpisello]

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

[@amit.pawase007]

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

[@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

[@WebDevCody]

It only runs twice in dev mode, not with a production build, so it isn’t a real issue with two api requests. If you write your cleanup effect correctly you should cancel the original api request using an abort controller on effect clean up.

[@Ayomikun]

@@WebDevCody Thanks for getting back to me on that Cody. Yeah I was thinking the abort controller might be the answer, but I guess the file logging example still stands. Would be annoying to have all those log messages written to a file twice even in a dev environment. Fan of your videos too. Thought I had my head around useEffect a while back but just went to debug some code I wrote a couple months ago and realised I made a real mess of it! 😄

[@WebDevCody]

@@Ayomikun I still don’t have my head wrapped around use effect 😢

[@benyamin4634]

thanks

[@hexada_ghostemane]

do you recommend DeepScan visual studio code-extension?

[@LoayAl-Said-j8p]

I feel so bad now.. hours and houlrs I've spent all night debugging my code for why the redux action is dispached twice..

[@harag9]

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?

[@ismaeladriannnn]

I am trying to add mongoose connection in the index.js file but when running node index.js this error is triggered: ^ SyntaxError: Unexpected token '

[@rishiraj2548]

Yes, I knew

[@thupilcharwaka]

Foes this work of React Native app also ?

[@adam_la_morre]

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

[@EnglishRain]

I used to always delete StrictMode lines lol

[@augustine_codes]

How can the issue of having unintended side effects be fixed? What can be done to avoid functions running twice?

[@NIronwolf]

Running them twice is the point. However you're processing it should end up in the same place even if it is run twice. This is guarding against future versions of React that may break things up differently and things may run at different times, so it all needs to come to the same result.

[@augustine_codes]

@@NIronwolf hmm. So how can we return the same result when it run twice. Using the first example. I understand using cleanups in the useEffect hook

[@guanbo-yang]

You can write a custom hook that runs effects only once even in strict mode, if you really need to do that

[@NIronwolf]

@@augustine_codes using globals in a component has always been a poor practice from how I understand it. Changing state should be done through passing props or adding something like Redux. I'm sorry I can't be more clear, I'm also learning this stuff. 🙂

[@noredine]

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

[@NubeBuster]

well, if your code is good then its cross compatible. But non strict code is always compatible with strict code

[@EliKennedy]

Oh man I was wondering why my log statements started doubling

[@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.

[@snydicus]

No; the point of sending duplicate API requests is that having an api request called upon component mount is an anti-pattern. Anything that you need to turn off Strict Mode to resolve is an anti-pattern.

[@appledore]

@@snydicus Ohhhh, got it. Thanks mate I understand. But wait. I'm only sending (executing the code) the request upon a click of a button (for example) and still its sending the request two times. Does that mean that when the component is mounted it executes my event handler function? That doesn't make sense. Have you ever experienced this? Oh and BTW, I'm using functional components (just FYI). A stackoverflow post mentioned that the strict mode renders the DOM twice. So for every click it'll render that click twice and that's why my click handler function is being executed twice and the request's been sent twice. IDK 🤷‍♂WEIRD!

[@WebDevCody]

@@snydicus idk if fetching data on mount is an anti pattern… you’ll need to fetch the data somewhere, so it’s either you listen for router change events and make the api request or you fetch the initial page data when a page / component mounts.

[@alexandranikolaieva8119]

@@appledore seems to be an old comment, but i came here because of the same question in my mind) did you find the answer? What is the right way to avoid duplicated request on click event handler with strictMode? 🤔

[@appledore]

@@alexandranikolaieva8119 no worries. What I found was, that strict mode is designed and used to do that exact same thing. So, if you want to avoid duplicated requests - remove strict mode, else just keep it - it’s not an issue or bad code design. When you build your project anyways, it’ll remove strict mode functionality i.e., it’ll send a single request in production environment. Hope this helps.

[@IkeVoodoo]

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

[@brabenetz]

True, when I see how messed up react is, I'm very happy with angular....

[@mr.actapus4069]

@@brabenetz How is it messed up

[@IvanRandomDude]

So I am not the only one. I am not even FE developer. I just watch this video to understand clients who fetch my APIs better

[@brabenetz]

@@mr.actapus4069 for the start: You need a useState(...) for having a variable which can be changed. There is no dependency-injection. Instead there are this complex patterns with state, reducers, actions, side-effects. It feels for me that useState(...) is a workaround for missing ChangeDetection and redux & redux-saga is a workaround for missing dependency-injection & RxJS.

[@tuananhdo1870]

@@brabenetz you are living in ice age, sorry. If you not knowing react, what you even doing

[@Yurusaii]

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.

[@josemaker5252]

This is called "scientific notation". It shouldn't be too hard to find a tutorial to create a function that does just this

[@TRIC4pitator]

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

[@flamakespark]

🔥

[@coleogden907]

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

[@rishiraj2548]

👍👍

[@navjotsingh2457]

❤

[@CTILET]

Cool

[@freespeech515]

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

[@DanZ-fq2qs]

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

[@shreyasnair02]

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

[@intoTheEther1]

You are right.

[@shreyasnair02]

@@intoTheEther1 then why is he manually writing react.strictmode? If it's enabled by default, why does he need to write that?

[@mr.actapus4069]

@@shreyasnair02 Because some people delete it without knowing what it does like I did in past because it used to log messages 2X time

[@intoTheEther1]

@@shreyasnair02 Some people may be setting up their React app without strict mode since it is an option if you manually select your options in Create React App(if I recall correctly). I would recommend Vite over CRA anyway. Simple and more performant.

[@inakiarias7465]

You are confusing JavaScript's strict mode with React.StrictMode component, they are completely different things

[@iamacoder8331]

React is bullshit, I don't quite get it why people use it. I think only because of marketing, sad.

[@jordanleon9201]

its BS but im getting this money though BUAHAHAHAHA

[@mohammadmedo5114]

One

[@AbdurrahmanASUR]

ربحت ايفون 69 برو ماكس لانك اول تعليق

[@atsglobalservices6136]

react is overrated

[@fadfooood]

Let me guess. You don’t excel in it.

[@lazycyclone]

do you have 5 years of experience in writing javascript?

[@atsglobalservices6136]

@@lazycyclone 4 years