The problem with useEffect

  Рет қаралды 36,368

Cosden Solutions

Cosden Solutions

Күн бұрын

Пікірлер: 142
@hugorafaelmc
@hugorafaelmc Жыл бұрын
react urgently needs to implement lifecycle hooks.
@faradzhusaev4597
@faradzhusaev4597 11 ай бұрын
It’s been there for years.
@r34ct4
@r34ct4 10 ай бұрын
Yeah something like "component definitelyMounted" or something
@RolandAyala
@RolandAyala Жыл бұрын
For simple case @1:04 where have some non-primitive static, I just define it outside the function like below -- this way, not disabling lint rule (which agree, terrible idea) and not needing to resort to memoization. Or, just put inside effect like you showed if just referenced locally inside useEffect. ``` import { useEffect } from "react"; const analyticsData = { userId: 1 }; export function Demo() { useEffect(() => { console.log("analyticsData", analyticsData); }, []); return {JSON.stringify(analyticsData)}; } ```
@shivamsharma6106
@shivamsharma6106 Жыл бұрын
Loved the way the problem and solution is explained in such a way that people can get it.
@yashmundra8497
@yashmundra8497 Жыл бұрын
Just loved this video, being a beginner in React, I always have encountered such problems and had to google them everytime but after watching this video not anymore. Kudos to you . Please bring more such videos!!.
@ahmadbenchakhtir
@ahmadbenchakhtir 7 ай бұрын
7:51 I believe there is a mistake. it will not until having a state update inside the useEffect.
@IoanAlexandruAndrei
@IoanAlexandruAndrei Жыл бұрын
what type of linting are you using that marks such usecases like on 1:40? Thansk!
@shubhamshekhar23
@shubhamshekhar23 Жыл бұрын
Hi, Just a quick question..Cant we use const analyticsData = useRef({userid:1}) in this case?
@supTE
@supTE Жыл бұрын
I have the same question. Usually I use useRef for this situation.
@cosdensolutions
@cosdensolutions Жыл бұрын
yes, but only if you will never use that value in the JSX as it won't ever cause your component to re-render
@supTE
@supTE Жыл бұрын
@@cosdensolutions Could you explain this bit more? useRef does not cause re-render. Isn't it?
@cosdensolutions
@cosdensolutions Жыл бұрын
@@supTE check out the video I did on useRef and you'll get it! useRef is the same as useState just that it doesn't re-render the component when it changes. So it functions differently and it's for different use cases
@ahmadbenchakhtir
@ahmadbenchakhtir 7 ай бұрын
@@supTE It's great when you want the same things like useState but without re-render, u can use it in useEffect dependencies...
@mountaindev7161
@mountaindev7161 Жыл бұрын
keep such constants in a separate file, import and use or define them above the component.
@SumanSen-ve1se
@SumanSen-ve1se 6 ай бұрын
Hey devs, I am new to React and 1 thing I am not able to understand here is if that trackEvent function gonna fire once and that's we kept no dependency in useEffect(), so why can't we run it inside the Component function body, directly? I am what am I missing? For Example: --------------------- const Demo = () => { trackEvent('pageEvent', {userId: 2}) return } export default Demo; --------------------- Can't we do like this?
@balae7799
@balae7799 Жыл бұрын
Quick question out of curiosity, wouldn't it work if we again destructure the userId from anayticsData and add the destructured value as dependency ?
@Rulito2405
@Rulito2405 Жыл бұрын
I think it depends on the complexity of analyticsData. If there is a unique id present with a primitive value (string or number), destructuring the id or simply putting "analyticsData.id" in the dependency array will prevent unnecessary rerender. But I don't know, if this will satisfy eslint
@iliesseddik4118
@iliesseddik4118 Жыл бұрын
And what if we wrap our object in the dependencies array with JSON.stringify ?
@cosdensolutions
@cosdensolutions Жыл бұрын
I've never done it tbh
@iliesseddik4118
@iliesseddik4118 Жыл бұрын
cause I think it can make our variable primitive (string)@@cosdensolutions
@xiiEJRAM
@xiiEJRAM Жыл бұрын
If React adopt Signal concept we don’t need to deal with - useEffect - useMemo - useCallback - memo anymore , and I hope they will add it
@cosdensolutions
@cosdensolutions Жыл бұрын
You can use signals in React already, try preact. However I wouldn't recommend, you will soon run into other problems and at that point just use another framework if you want signals
@ankitpradhan4183
@ankitpradhan4183 Жыл бұрын
then get fkd debugging so many subscriptions to signals.
@RaZziaN1
@RaZziaN1 Жыл бұрын
signals implementations in react use useEffect under the hood, so it's not good idea@@cosdensolutions
@carloseduardoraezescarcena2559
@carloseduardoraezescarcena2559 Жыл бұрын
Thanks so much, was absolutely clarify it 👌🏻
@anonysmooth648
@anonysmooth648 Жыл бұрын
hi question why others use this useEffect(() => { var mounted = true if (mounted){ // run fetch api } return () => { mounted = false } },[])
@erik.schlegel
@erik.schlegel Жыл бұрын
Stellar explanation as always, Darius. Thank you!
@manutube8080
@manutube8080 Жыл бұрын
Super good info!!!! Greatly appreciated.
@nyanya6068
@nyanya6068 Жыл бұрын
i always put the state in the dependency array whenever I think that the value will change. and will want to rerender the component.
@jazzdestructor
@jazzdestructor Жыл бұрын
Hey Cosden and other viewers, regarding the const analyticsData what if we need to use it in jsx code? we will still have to use it out of useEffect right??
@jordan_w
@jordan_w Жыл бұрын
Yes, if you create it inside the useEffect it will only exist within the scope of that function. So must be created outside of the useEffect to be accessed elsewhere (like in your JSX for that component).
@virtual5754
@virtual5754 Жыл бұрын
It is possible to use @preact/signals package react, which is for signals.
@cosdensolutions
@cosdensolutions Жыл бұрын
Yeah but be careful, they have a whole lot of other problems
@fdg-rt2rk
@fdg-rt2rk Жыл бұрын
I am having an issue where i am notifying react about events that happens on backend server through websocket , and react have to call a function that will fetch data from API , but on first the event it calls API 4 times and if there's another event React just doubles the amount of API calls and on next subsequent events it just gets out of control causing browser to crash and system lag. When i try this in svelte , there's no problem or any issues regarding this.
@cosdensolutions
@cosdensolutions Жыл бұрын
yeah React makes it a little bit harder unfortunately. But that means there's a bug in your code that you have to fix!
@Voltra_
@Voltra_ 11 ай бұрын
The first problem stems from making static data local instead of defining it outside the component. Tho react (and react devs) usually don't care about needless variables (often a lack of useMemo). React just likes to let you do stuff yourself instead of helping you as a framework should
@JaffyMaglinte
@JaffyMaglinte Жыл бұрын
The most important now is that we know how it should work after watching this video :)
@eugenepranoto3824
@eugenepranoto3824 Жыл бұрын
What about make the reference as analyticsData.userId? Will it infinite loop?
@mustafahaider9115
@mustafahaider9115 Жыл бұрын
I am sorry if this is a dump question I am still a beginner but what is the problem exactly with just wrapping it up with useState I know that it might be constant value so we wont use the setState so we will just not initialize it, it fixes the problem.
@cosdensolutions
@cosdensolutions Жыл бұрын
it does, and there's no problem, but state is reserved for things that will change over time. If something is a constant, state wouldn't make too much sense even though it would work
@joseaugustooliveira9430
@joseaugustooliveira9430 Жыл бұрын
Amazing content, you got a new sub!
@ainmosni4319
@ainmosni4319 Жыл бұрын
Im confused isn’t useEffect always got trigger every single render tho. And of course if we set the state inside the useEffect we should not add the state itself as a dependency.but in this case the variable is an object and it will never be the same when ever the component got rendered but however regardless of that variable the useEffect still gonna get triggered right. then why can’t we just have it as a dependency.Please someone correct me if i am missing smt.
@cosdensolutions
@cosdensolutions Жыл бұрын
useEffect runs always once on mount, + every time its dependencies change. So if there is an empty array as dependencies, it will only run that one time
@AnuMessi10
@AnuMessi10 Жыл бұрын
When the react architecture shifted from class to functional based components, I was excited primarily because of such hooks but I never understood how they would compensate for the hinderance they cause to lifecycle methods and performance issues (repaints and re-renders) even though they simplified our work as a developer.
@___jd
@___jd Жыл бұрын
Class components are superior in every way. The hooks API is perhaps the least intuitive design pattern imaginable.
@VitalArekhau
@VitalArekhau Жыл бұрын
Can’t agree with that. I enjoy with hooks much significantly than with classes.
@AnuMessi10
@AnuMessi10 Жыл бұрын
@@VitalArekhau as I said, it definitely improves the DX but at what cost?
@Sk8nRock
@Sk8nRock 11 ай бұрын
I stopped coding in React around the time they first introduced hooks. I remember that a lot of people weren't convinced that hooks are a good addition, but I see that they were widely adopted anyway. Now a few years later I have picked up React again and I see that the library is still suffering from this bad architecture decision and keeps adding new "features" in order to fix all the issues that the hooks introduced in the first place.
@vijTe719
@vijTe719 Жыл бұрын
Hi Thanks for your video. I am having exact issue to resolve. But useMemo expect a dependency. I am calling customHook inside useMemo. If I use dependency, useEffect triggers for any change in the form (use form) Any thoughts. Thanks.
@notoriouslycuriouswombat
@notoriouslycuriouswombat Жыл бұрын
useEffect never causes me or the teams/projects i work with any issues, strange i hear this so much... just that many ppl can't read? sounds plausible
@ritankarbhattacharjee7661
@ritankarbhattacharjee7661 Жыл бұрын
I am actually facing this issue, where I am trying to add some initial search query params inside the use effect for some initial data fetching. And if I add the variable in the dependency array which holds the value of the search query param, whenever i navigate to a different path the useEffect sets the search query params again and it makes the query param persist in the immediate next path I navigate. Hence, I am just leaving the dependency array empty just to make it work correctly, where ideally the query params should get removed on path change
@cosdensolutions
@cosdensolutions Жыл бұрын
This sounds like it could be refactored to not have this problem, and maybe not even need to use useEffect
@ritankarbhattacharjee7661
@ritankarbhattacharjee7661 Жыл бұрын
@@cosdensolutions how can I show you my code. I follow your channel and have seen you review codes 😅. Actually I am developing a site for my friend and this is the first project with which I started learning react js so it is possible that I am not doing it correctly
@cosdensolutions
@cosdensolutions Жыл бұрын
@@ritankarbhattacharjee7661 post it on the discord!
@ritankarbhattacharjee7661
@ritankarbhattacharjee7661 Жыл бұрын
@@cosdensolutions got it
@Barteque9
@Barteque9 11 ай бұрын
I would put that object outside the component declaration so it’s created once per application start.
@jazzdestructor
@jazzdestructor Жыл бұрын
Hey Cosden and other viewers, i get this issue in useState when using propsData as initialState in useState, so have to use an useEffect to check if the props is not empty an then update it. i tried googling but stackoverflow also suggests this way. is there better way to solve this?. eg: const Component = ({propData}) => { const [state, setState] = useState(propData || {}) // here state is set to empty object rather than propData } Edit: I did find a solution where you set it like this: const Component = ({ propData }) => { const [state, setState] = useState(() => propData || {}); };
@irfansaeedkhan7242
@irfansaeedkhan7242 Жыл бұрын
great you are talking about things that are required in real world problem
@ashimov1970
@ashimov1970 Жыл бұрын
why useEffect given Signals?
@theidk9567
@theidk9567 6 ай бұрын
Thanks a lot for this
@abdal-fadeelhamdyabdal-fad1649
@abdal-fadeelhamdyabdal-fad1649 Жыл бұрын
great explanation, any recommendations for a react native course ?
@cosdensolutions
@cosdensolutions Жыл бұрын
I don't know any off the top of my head tbh. I just dove straight into RN from React and never looked back until this YT channel hahaha
@ekchills6948
@ekchills6948 Жыл бұрын
Man this explained alot. Asides learning react for getting a job it's still fun to use. But if the react team fixes this will there still be a need for useCallback?
@cosdensolutions
@cosdensolutions Жыл бұрын
probably not, it's definitely coming, they're currently internally testing it in fb and instagram but it will take a while to come out
@asagiai4965
@asagiai4965 Жыл бұрын
Can someone point where is that rule? Or where did it came from?
@cosdensolutions
@cosdensolutions Жыл бұрын
react docs, it's how React is meant to be used
@asagiai4965
@asagiai4965 Жыл бұрын
@cosdensolutions I didn't see it on react site. react(dev)
@asagiai4965
@asagiai4965 Жыл бұрын
​@cosdensolutions to be clear I meant this 0:53 which you say is a hard rule. But I see react(dev) discourage using this. Instead they approve putting object or function inside the useEffect.
@cosdensolutions
@cosdensolutions Жыл бұрын
well yeah, the reason they suggest putting it inside is because if you don't, it has to go in the dependency array
@Omarwaqar-pt7wf
@Omarwaqar-pt7wf Жыл бұрын
So we can use either the state or the usememo right ?
@cosdensolutions
@cosdensolutions Жыл бұрын
in this example yes
@asandratrynyavojohanesa462
@asandratrynyavojohanesa462 Жыл бұрын
I see them as change listeners (or render listener if array is empty) so basically I know what I want to listen to, and that's why I'm am surprised on how would you miss your dependencies. You don't know what changes you want to listen to ?
@cosdensolutions
@cosdensolutions Жыл бұрын
Trust me it gets really difficult when you have a big component with a lot of variables. Think 5+ dependencies per effect. You forget without eslint. Or you change your mind in development and refractor but forget to add it in the dependency array. Happens too often
@dimitmoto1716
@dimitmoto1716 Жыл бұрын
​@@cosdensolutionsThat happens now in the project I am working on. The code initially was not written by me or my teammates and we had to add features. One every feature we add there are a lot of bugs and we spend a lot of hours to fix them. The main components are 1000 - 2000 lines long ( I think that's an anti-pattern) and inside them there are a lot of useffects and it's very very difficult to find which useffect influences each functionality and of course if we have the right dependences in each useffect, when we add one feature. I wonder if there is a better pattern to track changes in the app instead making of overusing useffects.
@zenova9926
@zenova9926 11 ай бұрын
As simple as subscribing state without initial render is not even comes by default, thanks valtio for provide such simple solution, but yeah react functional approach is some kind of engineering mistake
@warrenpeace2557
@warrenpeace2557 Жыл бұрын
Please do some videos on "signals''
@favanzzo
@favanzzo 10 ай бұрын
you should do a video about when to use useEffect vs eventhandlers to deal with side effects
@ParthaSarathylink
@ParthaSarathylink Жыл бұрын
using async is a mess in react, end up with bunch of boilerplate and wrapper code so react wont break
@Mroskas
@Mroskas Жыл бұрын
Dude just created 11 minutes video, on what is already explained by linter at 1:34. 😂
@harag9
@harag9 Жыл бұрын
Unless a previous dev has put // ignore lint on the line. :)
@cosdensolutions
@cosdensolutions Жыл бұрын
☺️
@alanthomasgramont
@alanthomasgramont 2 ай бұрын
Everyone forgets about Angular, but a lot of huge companies use Angular. Angular is far easier to work with and understand if you come from Java, C# or C++, especially their service injectors and state managers. Just don’t over use RXJS and you’re golden.
@tarasdashkevych
@tarasdashkevych Жыл бұрын
Super informative 👌
@prashlovessamosa
@prashlovessamosa Жыл бұрын
Hey your thoughts on react forget.
@cosdensolutions
@cosdensolutions Жыл бұрын
Haven't looked into it too much but it's definitely interesting. Curious to see what comes out of it
@dharmeshgohil9375
@dharmeshgohil9375 Жыл бұрын
awesome explanation keep it up can you make video on how to make useEffect hook custome i was asked in interview
@mohamedsalimbensalem6118
@mohamedsalimbensalem6118 Жыл бұрын
thanks for the video
@UberEverywhereSKRT
@UberEverywhereSKRT Жыл бұрын
What a great video. As i was learning react ive instinctly knew to not "listen" to eslint warnings telling me to add the used varaibles in the dependency array BUT I also didnt handle it the way you did (by moving variables in the useEffect itself OR useMemo). Instead I just left the warning as it was just a warning, but in no way I thought of adding the estlint ignore line even tho Ive seen people suggesting that solution..
@sameerdas3672
@sameerdas3672 11 ай бұрын
Stellar information
@uploadxxl
@uploadxxl 11 ай бұрын
Ah yes, adding new user switching functionality and not even testing it out? 10/10 pro dev move there
@sumitgupta6513
@sumitgupta6513 Жыл бұрын
Excellent explanation!!!
@mansurhamidoff1853
@mansurhamidoff1853 11 ай бұрын
React was much more intuitive before hooks were invented. Of course they have more pros than cons, but if your useeffects get messy it is better to use class component
@nonequivalence1864
@nonequivalence1864 Жыл бұрын
useEffect is probably the worst, useless and most illogical function ever created in software history. I'm convinced the devs who created it were on LSD.
@windiazmy6856
@windiazmy6856 Жыл бұрын
do you mind to make video about react or next js with typescript ? your videos is great. it will be amazing to learn typescript from your video 😊
@cosdensolutions
@cosdensolutions Жыл бұрын
planning to make a "convert JS to TS in React" video soon!
@vinhandev
@vinhandev Жыл бұрын
Thanks for sharing
@iury664
@iury664 Жыл бұрын
you can named analyticsData with upper case show data it must be a constant
@webdevpersion
@webdevpersion Жыл бұрын
Hello Sir I see your code review videos I want you to review my code also can you do that???
@cosdensolutions
@cosdensolutions Жыл бұрын
Post it on the Discord!
@nested9301
@nested9301 Жыл бұрын
alternative title: the problem with react
@randompointlessness2766
@randompointlessness2766 Жыл бұрын
I've seen eslint to suggest not only to have the object in dependencies but also suggest to included the function too, and that suggestion is worse 😅
@cosdensolutions
@cosdensolutions Жыл бұрын
you actually should put the function too, if it's defined inside the component. If it causes problems, just wrap it in useCallback
@MitraWithUSA
@MitraWithUSA 10 ай бұрын
First rule of programming -> if a code works we shouldn't touch it. 🤣🤣🤣🤣
@anurag5357
@anurag5357 Жыл бұрын
I was facing same error in my last project..but today got it actually things
@Вбелом-й3з
@Вбелом-й3з Жыл бұрын
just declare this constant at module level or put it in another file
@cosdensolutions
@cosdensolutions Жыл бұрын
Won't work if you need state in it
@shashankkulkarni993
@shashankkulkarni993 11 ай бұрын
Thank you :)
@di3gosaavedrasena
@di3gosaavedrasena 10 ай бұрын
beautiful
@21mighty86
@21mighty86 11 ай бұрын
Really nice video
@gpet2184
@gpet2184 Жыл бұрын
Thanks a lot
@meylis_so2
@meylis_so2 5 ай бұрын
cosden did this solved
@bartlomiejuminski
@bartlomiejuminski Жыл бұрын
I dont understand why React is so popular. It have so much magic tricks and rerender errors i fucking hate that.
@uome2k7
@uome2k7 Жыл бұрын
you should do [analyticsData.userId] for the dependency array. try to get to a primitive type within any objects you are depending on...in this example, you are not depending on analyticsData changing, you are depending on the user changing. Then even if/when it gets changed to state, it will still work correctly. using state and putting [analyticsData] for the dependency array is still unsafe. you can setState with a new object somewhere and then it would fire again because of the new object reference even if the userId didnt change, but some other property of analyticsData did you just have to remember the dependency arrays are doing shallow comparisons.
@sumitghewade2002
@sumitghewade2002 Жыл бұрын
Awesomeee!!
@toothless.tarantula
@toothless.tarantula Жыл бұрын
vue ftw
@N4pthor
@N4pthor Жыл бұрын
Your "error case" example is just plain wrong, nobody would ever do this. Don't blame react for your own mistakes. You can easily avoid these mistakes by RTFM. And no I'm not a react fanboy, I've worked with all the major framkeworks and they all suck equally.
@daaa57150
@daaa57150 Жыл бұрын
I don't get why React is so popular, its full of tricks and traps.
@brandonmanuelventuraumana1035
@brandonmanuelventuraumana1035 Жыл бұрын
React is mostly used because it just works, it's like JavaScript, does not matter how you do things it will (mostly) work, and that's why sometimes we may forget about this kind of details, or not having a worry about the cleanest solution, the fact is, other stack do a lot of things better than React, but right now React is the most used just because is like writing vanilla JS. Have to say that, React team should improve this kind of things, but also, a lot of people code using React and not even worry about learning programming basics, a little bit of JS and the React hooks behind the scenes, carrying on this kind of problems, and React team cannot do anything to change this, it's not only their fault. Things like value types, reference types, how is done memory management by X or Y language, what makes this hook to fire (React hooks documentation is pretty well explained, those examples you gave are in the docs, for example), etc. is developer responsibility and something all of us must care, and it's not a bad thing to say this, it's important to always remember that foundations can help simplify these types of things.
@pascalcasehkv
@pascalcasehkv 2 ай бұрын
The video seems too long for this topic You could have made it shorter by at least 5 minutes.
@gronkhfp
@gronkhfp 7 ай бұрын
Because „it’s a rule“ is a pretty bad explaination 😅
@DM-pg4iv
@DM-pg4iv Жыл бұрын
Yeah idk man. Been doing React for 6 7yrs but Vue is better.
@IcedCupcakes
@IcedCupcakes 11 ай бұрын
This is super helpful. Thank you!
Single Responsibility Principle in React (Design Patterns)
16:50
Cosden Solutions
Рет қаралды 51 М.
Turning bad React code into senior React code
13:10
Cosden Solutions
Рет қаралды 94 М.
UFC 310 : Рахмонов VS Мачадо Гэрри
05:00
Setanta Sports UFC
Рет қаралды 1,2 МЛН
1% vs 100% #beatbox #tiktok
01:10
BeatboxJCOP
Рет қаралды 67 МЛН
This Algorithm is 1,606,240% FASTER
13:31
ThePrimeagen
Рет қаралды 857 М.
You Are Using useEffect Wrong
14:40
Cosden Solutions
Рет қаралды 37 М.
You might not need useEffect() ...
21:45
Academind
Рет қаралды 177 М.
Learn React Hooks: useCallback - Simply Explained!
17:15
Cosden Solutions
Рет қаралды 109 М.
Don't Make These Next.js Mistakes
13:01
Dave Gray
Рет қаралды 24 М.
Dependency Injection, The Best Pattern
13:16
CodeAesthetic
Рет қаралды 900 М.
Goodbye, useEffect - David Khourshid
29:59
BeJS
Рет қаралды 504 М.
In Defense Of useEffect - React's Most Dangerous Hook
23:35
Theo - t3․gg
Рет қаралды 47 М.
Refactoring a React component - Design Patterns
15:19
Cosden Solutions
Рет қаралды 100 М.
UFC 310 : Рахмонов VS Мачадо Гэрри
05:00
Setanta Sports UFC
Рет қаралды 1,2 МЛН