This Is Why React Prints All Console Logs Twice
Вставка
- Опубліковано 9 лис 2022
- Full Video: • This One Line Of Code ...
Sorry about the bad audio quality. My computer changed my mic to use my webcam mic instead of my actual microphone.
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
#Shorts
React team: We're gonna break your app to make sure your app is broken
I actually read about this at work today, what a coincidence
Similar situation here, I‘ve encountered this topic at work this week
What you need? Google knows better.
@@gorabramyan Google is too big, genius
Kinda same, except I'm looking at it from Next.js perspective. One of my co-woker was getting same thing logged two times and I was also wondering why, now I know.
indeed, its very helpful .
back then when i was a noob i remember once i put a interval to increase a counter in a useEffect and i saw a weird behavior .
because my component was rendering 2 times and hence i had 2 intervals to increase my counter.
than i cleared the interval at the useEffect's cleanup function and everything went ok .
I recently discovered this just a few weeks ago, I was really mad why were my logs printing twice
I noticed this twice rendering yesterday... I couldn't understand why it was happening
Now i can 🤝🏾
Oh so, thats why My local storage saved twice when i was testing it
also, the mounted will only called once because of the empty dependencies.
and if dependencies aren't passed i.e. no " ,[ ] " then the mounted will be called everytime any component render.
I searched for the answer this afternoon but to no avail. And now UA-cam recommends me this shorts.
thank you for this video kyle
thanks for telling, I was trying to figure if there was a bug in my code for it to console log twice
Every developer must understand Strict Mode:)
damn i thought my shit was rerendering twice for some reason and i was almost ready to gouge my skull
This was the same question on my minds
Good point in this video. Angular does something similar in development mode as well.
Great. Thanks for the depth.
I knew about StrictMode earlier but didn't know the exact use of it. Also why it is greyed out and why it wasn't when I initially started out.
This is very frustrating because many tutorials have you call APIs in the App function and, now that I understand why this is happening, thanks to this video, I will be sure to look into how it SHOULD be done
Been fretting about this for weeks.
this helped a lot thank you
I was new to react and i thought why was it printing all console.log 2 times. I thought it was a bug in my code. This was really helpful
Thanks man. I wanted to know the reason why things were being logged 2 times for a long time.
I remember tried to do prompt and it does executed twice lmao
He always refers to look at the comments, but nothing can be found here. I wonder if he sells any courses. Since the material is good, I’ll be happy to join even though I’m already a react programmer.
React has alot of nasty code under the hood . I see the future of elm and functional programming in general
elm looks promising!
VueJs, the best
You are kidding me, I've spent ages wondering why my app seemed to running code multiple times and couldn't figure it out. Sure enough, my app component is wrapped in a ScrictMode tag
Beginner who console log to check in dev tool is data coming from api : OMG 😱
Why should I never declare an external variable, if it looks to work here.
thanks
THANK YOU! 👍
Thank God you didn't recommend turning it off.
THANK YOU
Damn u are soo good at this , this helps me a lot thanks!!!
What's the font style that u r using in this video
very helpful
best guy on youtube
Dude, can you make a video of tricks with URL fragments? 🙏🙏🙏
Thaks!!!
"It's just bad code in general" lol savage
hi, is there a way to direct print to print like default print without showing pdf or any for like restaurants. and print at multiple printer at same time
I want to ask why when an error occurs in react error message is displayed twice on console and even getDerivedStateFromError() life cycle method runs twice.
React always feels broken, not even angular.js (Angular 1) was that funky.
Just go Vue and you'll never go back
It's supposed to be helpful for beginners.
You can always disable strict mode and the funkiness in development will stop.
is there an alternative for react.strick mode? bcs this is making me angry at the development time. I really don't want to double rendering.
everything in react behave weirdly, nothing is clear, nothing is explicit or well documented or behave like you think it should behave, react is both genius and pure fucking insanity at the same time
that is why I stay away from it, it's the worst of the 3 dogs
it come when react 18 launch
Why axios sent request twice, one is our regular request and other is request with option method
Thats normal. Option is a pre flight request
then what is the solution for this? didnt get it.
So then how do you stop the double rendering for some things while keeping strict mode? Or do you have no choice but to remove strict mode?
Once you compile for production strict mode stop the double render.
It’s useful for you in dev, it’s simulating an upcoming React breaking change. Fix your code.
Plz answer this :- Why is using 'renderCount' variable is deprecated by him ?
Global state is something that can lead to a lot of problems in applications. There are some exceptions to this general rule though, such as a GaneState object in game development, where using global state can be helpful/effective.
Already knew it✌️
"Its not a bug, it's a feature". Having your components run twice unexpectedly with 0 explanation, ONLY in dev mode is absurd.
More proof react is a hot pile of garbage.
@avfr Care to elaborate on what edge cases you're referring to?
@avfr Okay, I guess that makes sense. It would also force you to unhook event listeners to prevent memory leaks.
It still seems bizarre that it would force this behavior.
You can’t be a dev looking this good 😂❤
And what is the solution?
Ignore it hope that it doesn’t happen in production and starting to consider other frameworks that doesn’t decide to double your code runtime or worst fucking up checking how many api requests go out
i cant hear you man turn up ur microphone
React is still over-hyped for me, I've used all 3 big dogs to create a medium complex application, and I have to say React is the worst to work with.
Hello, thank you for your tutorials, but can you speak slowly, please!
Why no semicolons? :(
Hatts of to this man, he is god for me , he provide me free amazing knowledge when I can't afford a paid course ,thank u so much