The problem with useEffect

Join The Discord! → discord.cosdensolutions.io
VSCode Theme | Font → Material Theme Darker | Menlo, Monaco "monospace"
Let's talk about useEffect in React for a bit. There is a real problem with useEffect that we, as React developers, need to address. useEffect doesn't make it easy for us to follow its rules correctly, and that usually leads to developers taking shortcuts and shipping bugs in production. The rule is this: anything that is used in the useEffect is considered a dependency and has to go in the dependency array. It's the rule. If you have to wrap the dependency in a useMemo or useCallback, then you have to do it. Don't ignore it like many developers do and don't disable eslint! It's going to come back and get you later!

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

[@shivamsharma6106]

Loved the way the problem and solution is explained in such a way that people can get it.

[@hugorafaelmc]

react urgently needs to implement lifecycle hooks.

[@faradzhusaev4597]

It’s been there for years.

[@r34ct4]

Yeah something like "component definitelyMounted" or something

[@erik.schlegel]

Stellar explanation as always, Darius. Thank you!

[@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)}; } ```

[@manutube8080]

Super good info!!!! Greatly appreciated.

[@carloseduardoraezescarcena2559]

Thanks so much, was absolutely clarify it 👌🏻

[@IcedCupcakes]

This is super helpful. Thank you!

[@IoanAlexandruAndrei]

what type of linting are you using that marks such usecases like on 1:40? Thansk!

[@joseaugustooliveira9430]

Amazing content, you got a new sub!

[@everybodylovesballs]

Great video and something every React developer should be aware of. But to keep things in perspective, I'd also say that this is the only case that I can remember where I've ever resorted to disabling an eslint rule so it's not like all of React is this unintuitive (I'm not suggesting that this video is saying that it is!). I went through my code to find where I did that and the rule doesn't exist anymore so I must have worked out how to solve the issue sometime later.

[@tarasdashkevych]

Super informative 👌

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

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

[@sumitgupta6513]

Excellent explanation!!!

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

[@sameerdas3672]

Stellar information

[@abdal-fadeelhamdyabdal-fad1649]

great explanation, any recommendations for a react native course ?

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

[@di3gosaavedrasena]

beautiful

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

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

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

[@theidk9567]

Thanks a lot for this

[@21mighty86]

Really nice video

[@sumitghewade2002]

Awesomeee!!

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

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).

[@irfansaeedkhan7242]

great you are talking about things that are required in real world problem

[@ahmadbenchakhtir5787]

7:51 I believe there is a mistake. it will not until having a state update inside the useEffect.

[@user-nl3uu9cx3x]

The most important now is that we know how it should work after watching this video :)

[@vinhandev]

Thanks for sharing

[@shubhamshekhar23]

Hi, Just a quick question..Cant we use const analyticsData = useRef({userid:1}) in this case?

[@supTE]

I have the same question. Usually I use useRef for this situation.

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

@@cosdensolutions Could you explain this bit more? useRef does not cause re-render. Isn't it?

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

[@ahmadbenchakhtir5787]

@@supTE It's great when you want the same things like useState but without re-render, u can use it in useEffect dependencies...

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

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

[@Mroskas]

Dude just created 11 minutes video, on what is already explained by linter at 1:34. 😂

[@harag9]

Unless a previous dev has put // ignore lint on the line. :)

[@cosdensolutions]

☺️

[@eugenepranoto3824]

What about make the reference as analyticsData.userId? Will it infinite loop?

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

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]

then get fkd debugging so many subscriptions to signals.

[@RaZziaN1]

signals implementations in react use useEffect under the hood, so it's not good idea@@cosdensolutions

[@mohamedsalimbensalem6118]

thanks for the video

[@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 || {}); };

[@shashankkulkarni993]

Thank you :)

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

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

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

yeah React makes it a little bit harder unfortunately. But that means there's a bug in your code that you have to fix!

[@gpet2184]

Thanks a lot

[@Omarwaqar-pt7wf]

So we can use either the state or the usememo right ?

[@cosdensolutions]

in this example yes

[@SumanSen-ve1se]

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?

[@zenova9926]

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

[@mansurhamidoff1853]

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

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

Class components are superior in every way. The hooks API is perhaps the least intuitive design pattern imaginable.

[@user-rs1wk4dj6n]

Can’t agree with that. I enjoy with hooks much significantly than with classes.

[@AnuMessi10]

@@user-rs1wk4dj6n as I said, it definitely improves the DX but at what cost?

[@Sk8nRock]

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.

[@mountaindev7161]

keep such constants in a separate file, import and use or define them above the component.

[@favanzzo]

you should do a video about when to use useEffect vs eventhandlers to deal with side effects

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

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

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]

This sounds like it could be refactored to not have this problem, and maybe not even need to use useEffect

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

@@ritankarbhattacharjee7661 post it on the discord!

[@ritankarbhattacharjee7661]

@@cosdensolutions got it

[@prashlovessamosa]

Hey your thoughts on react forget.

[@cosdensolutions]

Haven't looked into it too much but it's definitely interesting. Curious to see what comes out of it

[@Barteque9]

I would put that object outside the component declaration so it’s created once per application start.

[@Voltra_]

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

[@anonysmooth648]

hi question why others use this useEffect(() => { var mounted = true if (mounted){ // run fetch api } return () => { mounted = false } },[])

[@uploadxxl]

Ah yes, adding new user switching functionality and not even testing it out? 10/10 pro dev move there

[@dharmeshgohil9375]

awesome explanation keep it up can you make video on how to make useEffect hook custome i was asked in interview

[@iliesseddik4118]

And what if we wrap our object in the dependencies array with JSON.stringify ?

[@cosdensolutions]

I've never done it tbh

[@iliesseddik4118]

cause I think it can make our variable primitive (string)@@cosdensolutions

[@asagiai4965]

Can someone point where is that rule? Or where did it came from?

[@cosdensolutions]

react docs, it's how React is meant to be used

[@asagiai4965]

@cosdensolutions I didn't see it on react site. react(dev)

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

well yeah, the reason they suggest putting it inside is because if you don't, it has to go in the dependency array

[@user-ik7rp8qz5g]

It is possible to use @preact/signals package react, which is for signals.

[@cosdensolutions]

Yeah but be careful, they have a whole lot of other problems

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

planning to make a "convert JS to TS in React" video soon!

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

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]

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

[@toothless.tarantula]

vue ftw

[@anurag5357]

I was facing same error in my last project..but today got it actually things

[@warrenpeace2557]

Please do some videos on "signals''

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

you actually should put the function too, if it's defined inside the component. If it causes problems, just wrap it in useCallback

[@nested9301]

alternative title: the problem with react

[@iury664]

you can named analyticsData with upper case show data it must be a constant

[@Drizxander]

First rule of programming -> if a code works we shouldn't touch it. 🤣🤣🤣🤣

[@ashimov1970]

why useEffect given Signals?

[@ParthaSarathylink]

using async is a mess in react, end up with bunch of boilerplate and wrapper code so react wont break

[@xxXAsuraXxx]

why cant they just make things clear like Mount() UnMount() Watch() Computed()

[@cosdensolutions]

it used to be more like this before 😁

[@webdevpersion]

Hello Sir I see your code review videos I want you to review my code also can you do that???

[@cosdensolutions]

Post it on the Discord!

[@user-jx9rw3ip6w]

just declare this constant at module level or put it in another file

[@cosdensolutions]

Won't work if you need state in it

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

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

[@bartlomiejuminski]

I dont understand why React is so popular. It have so much magic tricks and rerender errors i fucking hate that.

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

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

I don't get why React is so popular, its full of tricks and traps.

[@gronkhfp]

Because „it’s a rule“ is a pretty bad explaination 😅

[@DM-pg4iv]

Yeah idk man. Been doing React for 6 7yrs but Vue is better.