Goodbye useEffect shouldn't be the name of the talk, all those examples, useQuery, useLoaderData are actually using useEffect under the hood, more like "Hello dependencies"
As always with talks like this, you are saying goodbye to using useEffect inside of your component code. The fact that useEffect is used elsewhere in the app doesn't change the fact that you are removing it from your component code itself. Abstracting away messy code is good.
@@anarchoyeasty3908 Then call it "Abstracting useEffect", everybody gets it, show an example of custom hooks and lead into libraries that are better maintained than your custom silly code. The talk/talks would be less confusing ;)
I think he got the problem right: using useEffect to declare asynchronous logic is not scaleable. One solution can be to use things like useQuery which will somewhat simplify that stuff. When using Redux you can also use thunks and saga to avoid chains of useEffect calls.
Now this talk compared to the previous one is much more helpful. More examples, more time to explain the problem and solutions, and a lot less promotion of XState. Great talk, David, thank you!
My favorite useEffect is the one which won't show up but then miraculously appears. You know `Rendered more hooks than during the previous render`. Love that. Especially if you don't know why because there are no conditions which prevent a hook from executing.
@@1OJosh Which would mean that I had a condition which decides if the return gets ecevuted or not but there is no conditon or return like I already mentioned in my comment above.
@@thejezzi5219 Then maybe you've got a condition before a hook, like if(something) useHook() There has to be something like that somewhere. Are you able to consistently reproduce the error? Are you sure it's definitely happening at random? Could be an external package causing the error as well, I'd check them too
So React introduced something and based on the documentation and examples they provided, people started to use it as recommended, then React devs figured out that this could be abused badly so they decided to introduce some "safeguards" (which people will ignore anyway). Well done again, React 👏
Absolutely! I'm a full stack mostly FE dev in React and am not a fan of React and how complex apps need to be constructed. I've worked in other FE frameworks that seem to be better but are not as popular as React... hopefully that changes soon.
2 ปีที่แล้ว +11
@@DevMeloy I can relate to this. Also, while React seems good in theory, I'm yet to see a project, which is not a mess (or tend towards being that). I don't know the reason of this, and maybe it's just my poor experience, so I don't want to generalize, ofc.
I find it hard to believe that I have to install another library to perform a simple fetch call because React dislike its own useEffect-based solution. Thanks, React
i knew that there was something wrong when that shady dude tried to sell me his javascript course for 15$ 3 years ago, i can't believe how much i've sacrificed for money 😭.
You can do whatever you want, but react-query (while yes, another library) is great for this purpose--even if there weren't anything wrong with useEffect.
@@dweblinveltz5035 It can be the best library ever, but the problem is not using react-query; The problem is React creating the useEffect hook to handle effects such as data fetching, then discouraging this use case without providing a React-only alternative. So, according to the new React "rules", the only viable way to perform a simple fetch call is by using another library.
@@dweblinveltz5035 The use hook is the alternative, but unfortunately it’s not available yet =( If they had released the use hook before “deprecating” the useEffect it would have been great.
@@theindieprogrammer For simple fetch, I usually create custom hook (with useEffect in side) to handle data fetching. But yeah, it is much simpler to use something like react-query to do that job for you.
@@dreamerslab interesting I think it’s how it works for a lot of people - for me I never have videos to watch - in even struggle to find new ones and get frustrated haha
Typical web development - hooks come out and everyone is like "wow this is so much better than class based components because we have no this to deal with we can combine stuff logically and no spread it across different lifecycle methods, etc. etc." which are definitely good points. The problem I see is that hooks and useEffect in particular were glorified like "this is the way", then a few years later - "useEffect can be really bad, even the name is confusing". Then we have another solution to the problems useEffect might bring. So now I just expect this solution to become problematic as well and people would have to find a solution to the solution. But I guess that's just how stuff is, we have numerous examples, like functional programming being an old paradigm and getting revived in recent years as the way to go. My conclusion - there is no one perfect way of doing anything especially in programming, what is modern today might be an anti-pattern tomorrow and it all comes down to personal preferences, marketing of the idea/approach, having good documentation, etc.
From everything I've seen poor use of useeffects comes from devs never bothering to learn how react even works. Then they just complain about hooks. Learn how it works and you won't shoot yourself in the foot and write rubbish. The old docs were bad though, the new beta docs are good
@@ChillAutos I agree, for sure new and better ways come up. I was fine with class based components when they were the thing even though I have seen a few of their downside along the way. Same with hooks, so yeah whatever the technology, you should really have a good understanding of what is going on and how to use it, just as you said so you don't write rubbish or make videos like - why "something" is the wrong way.
@@VortechBand Absolutely! Going for example from class components to hooks and now having further solutions for the "downsides" of useEffect, this can be considered progress. I don't want us to stay with 1 way of doing things and stick to it forever and ever and not make any progress. What I am up against is how things get presented with a lot of hype in a marketing style like "this is the way" because it sounds contrary to as you said progress, it's like well "Eureka" we found the solution that is "THE Solution". I would like something more objective, like "we've seen how this played out and we see this and this issues, that can be remove/minimised if we alter out approach to this".
i felt the best answer is going back to class components when you WANT be sure didMount, didUpdate, didUnmount works as expected, not adding another lib that want to implement class components lifecycle control within functional components.
What an intuitive framework 😤 I learned a couple of things, but what I am hearing is using React to communicate with an API is wrong and I should be using React features that don't exist yet or another library
Regarding fetching data, there was no explanation for how third party libraries handle it. You just said let these other people abstract it for you so you don't mess up, without explaining the abstractions used in remix, next, query, etc
react really has kinda turned into a non standardized weird library comparing it to web standards. Nowadays i much more prefer SolidJS or any Library that does not get me to download 20 libraries to make a simple fetch or have virtual dom-magic maxxed out for simple change detection
I really don't struggle with useEffect because I don't use it when stuff gets complicated. I don't want to declare my async logic in JSX or with useEffect. That's why I'll use redux-thunk and redux-saga to remove all that logic from the components. So the components can be purely reactive.
Exactly! People don't understand useEffect properly but decide to use it anyways then run into problems and call it bad design. As devs its our job to understand the technologies we work closely with.
@@tienlx97 I totally agree with you. I really don't understand why we need a single Redux store for multi-state management. They are standalone states in their own component. We are focusing on single-page rendering with minimal state management while Redux asks us to manage states and methods in one store.
The mess and technical debt React has introduced to the world should be at some point be measured in time and resources lost . Companies that adopted React without the teams necessary to maintain it will end up spending thousands of $$$$ to re-write their applications in something else ( by the looks of it Svelte, or Vue, or anything reasonable)
people should read the design philosophy in react before saying stuff like useeffect is complicated. perhaps it s not the apps that we build that are not complicated enough for those that understand it, maybe it s just that some devs don t bother understanding how you should use this function and how it works internally and what it is supposed to be
You're telling me the solution to a problem is to have more understanding of the tools you chose instead of adding more libraries/tools which you understand even less? BLASPHEMY! _installs entire npm repository into project_
It feels like the solution with useEffect is basically using it with rxjs. For example the takeUntil operator is op for clean ups, I wonder why rxjs didn't pick up with react community.
The problem with Suspense is that it’s not fine grained enough. For more vertically stabile less jumpy loading experiences you actually want nearly identical html with additional loading styles applied. Having a fallback should be an anti-pattern for pretty and impressive feeling things. It feels so good to transition from some placeholders to more fully loaded content with minimal transitional animation for only some text and some images.
React has never been able to handle fetching data correctly. I don't know what the disconnect is.... I feel like React just wanted to build a rendering library and pretend that async/await, promises and fetching data didn't exist and it wasn't their responsibility.
Leading to componentDidMount/componentDidUnmount, useEffect,and Redux Thunks. ALL of which are horrible hard to use designs... I just wish our components could be async functions.. but apparently they've coded themselves into a corner and can only do that on the server....
At the moment, yes, but a future version of React might run useEffect some unknown number of times because the component could sometimes get unmounted and remounted automatically. The point is that you need to change the mental model of how you use useEffect so that you never depend on the component being (un)mounted. Here's a good explanation from a blog post I found: "Such a decision was made by the React team, as in the future, they’d like to add a feature that allows React to add and remove sections of the UI while preserving the state. As it requires components to be resilient to effects being mounted and destroyed multiple times, an additional check has been introduced."
Most topics he presents start with "you remember when I said you should do this...well no quite" the entire talk is "not quite/most of the times/usually". Why even learn the framework if in 6 months it changes 180 degrees, just makes it a pain to maintain long running products.
I think useMemo is important not only to memoize the cost of computing some value, but also to stabilize values as they may be passed down as props, to an unknown number of components of unknown implementation, and in general in React apps they can be more efficient when components inputs are not changing unnecessarily... If it's not a primitive then the usual shallow compare will fail when a new object is created on each render. useMemo should be used as good practice imo. Great talk, agree wholeheartedly on the main topic, useEffect, thank you!
Haww, I only useEffect and useState from last 2 years. I have never used others. One of my components has 10 useEffects. I was kinda proud of them. Even patted myself in the back and praised react for being such a nice framework.
nobody in the right mind will use xstate as a primary state management solution. zustand/jotai/react query/recoil might be solutions. React should've stayed at the "simple view library" level and promote some other, sane, solution for state management. maybe reactive streams. as a person using React from its beginnings, I still think that maybe half of their development now is innovation and the rest is just complication.
1- What if we want to call it once for every re-use? We can't have it outside. 2- if one specific thing changes in prop do something and using custom hook is same thing
You could do and remember all this crap and install frameworks into a library just to do basic stuff, or just use Angular which is a stable framework, much more straightforward, class based, and just works.
You don’t have to install another frameworks in a library, maybe another framework in this framework, because React is a framework disguised as a library for marketing (and adoption) purposes
@@adrianvmois9426 That's not true, I've been using and watching since 2013. It's a library that's been trying to become a framework for years that's constantly been changing and is still lacking a lot that a framework needs to have. Despite the addition of hooks etc, people still add redux and saga and all kinds of things to be able to work with React properly. It's not a framework disguised as a library, it's a library trying to become a framework. It literally started as just a way to insert JSX into HTML and render that. That's all it used to do. And it still sucks at state management on its own without redux and managing async state without saga. And doesn't even begin to offer a lot of what the other frameworks offer. Some people even think Jquery is a framework, but it's not.
I can't tell you how much I don't want to import a state machine into front end code... Code gen that results in non-native code is just bad. If it at least resulted in a few boilerplate JS components I would be ok with using those as a starting point.
@@mattgreenberg3207 It's a terrible idea because your production build runs differently than development so you need to test your code in both environment to make sure that your app works as intended
Excellent one! Really usefull also since the new docs came out from react, first one I red was actually you might not need an effect, and it change my view of react completley!
When you advice to use external libraries/frameworks to avoid doing something in a library, you know it's a bad one. I've been thinking that class components was a lot better. Also I am questioning why did I even switched to React, I would be fine and never think about all this if I was using Angular.
Its not that React is bad, its just that people don't understand how useEffect works and end up using it wrong and complain about it. I think one of the major reasons for it is the shift from class to function components.
The problem is React is a library. It was meant to be a library to create basic UI. UI which works and changes itself based on state. All other stuff like async data fetching, SSR, bundling, routing, etc was not supposed to be in it. It was upto dev to add it however they want. But that of course became complicated, React team is still trying to figure out how to provide these capabilities, while still staying into the relam of library and not turning into a full blown framework. NextJS for e.g. is something I would classify as framework.
@@ishandiablo No, the issue is how they included incorrect examples in the Docs and people started using it. I've literally searched useEffect in reactjs docs and found a "Bad Example of useEffect". No fam, it's just represented badly.
@@wlockuz4467 Yes but if thousands of people are doing it wrong, I think the problem is somewhere else. I'm using React but I feel frustrated about this 'oh we didn't intended this when we introduced hooks' statements.
As a developer who has never been in a very messy React codebase, I'm wondering what React got so wrong that someone is advocating for imperative code over declarative code. Like, something is seriously wrong here.
Oh trust me, you haven't seen the half of it. Although I prefer hooks, I got to miss the simplicity of componentWillUnmount. Like, ok, the component is about to unmount, so I want to gather such and such information from such and such inner components through references, bundle it up and dispatch it to the state. Can I do that in a useEffect(()=> { .... return ()=>cleanup, []}? No, I cannot because my cleanup has dependencies and the return statement of useEffect(....,[]) will run on unmount only when the state is clean and there are no dependencies, oh, and the inner components are destroyed too. When you get to need something that will run just before the destroy cycle begins, you are left with horrible messy ideas that make your codebase atrocious, horribly atrocious. The React team should give a hook or something that performs exactly like a componentWillUnmount, so people can gather data, do any final stuff they want to do and then let the component go.
React’s declarative data driven aspect has always been about what you see. Some things always have to be imperative, that’s how events work. The beauty of react is that there’s always an escape hatch to let you work around the limitations.
@@Diamonddrake that is NOT how events work. In React I've noticed a lot of developers confuse the mechanics of how React has to work with best practices. Maybe it would be helpful for you to try out another framework sometime.
@@mfpears you are being presumptuous, I am a professional software engineer and I maintain code bases across a variety of frameworks and technologies. Events are by definition imperative. Events hook into JavaScript through callbacks in the browser engine and they do so imperatively. React and react minded libraries hide those details as much as possible.
@@mfpears I watched your video, I feel like the title and angle is a strange approach. None of your 5 examples are reasons why imperative programming is bad, they don't really draw any lines (you can derive state and keep data close to where its used in imperative programming and you the other points are all subjective). A better approach would be suggesting to be more reactive when possible. I like react because I do enjoy reactive programming. But If you limit yourself exclusively to abstractions that follow a paradigm your core language does not then you are forcing yourself to fight against their limitations. My point is there are times when an action can't be reactive, specifically an event. if you want to do something that doesn't depend on state, then to do it reactively you need to make up some state for it to depend on just to make it happen. If you wrap your events in an observerable, it doesn't just become reactive. If that's what you are thinking then I believe your mental model off. Something being imperative isn't bad, its just not always the best choice. When an event happens like a click and you change some state, that is an imperative action, even if you wrap it in a stream listener and use that to derive new state from existing sate. But you def don't want to manually crawl the browser DOM and update divs everywhere manually during an imperative action. Limit your imperative actions to permuting state and invoking effects that are not state based. You can jump though hoops to keep it declarative, or you can write good code that breaks pretend rules sometimes. Re-rendering an entire system because a number changed is a reactive code problem that can be difficult to fix if they are disjointed in the hierarchy and all your code isn't perfect, Just updating the single spot on the page is an imperative solution that its performant and can save the day. There's very few objective truths in programming.
The primary purpose of framework authors is to lock you into their framework. We were able to build systems before React, and one of the most important lessons to learn is that even the UI is just an I/O device and should be abstracted out of the truly important core logic.
I love how this sums up everything essentially wrong with react. You can have hundreds of conferences for years with people trying to explain how setting a value can go wrong. Can't wait for SolidJS to take the place of react. No surprises there....
If it takes an entire talk to explain a core aspect of framework/library, then there's clearly a problem. React is whole lot of "but actuallys" and "you're doing it wrong"
My criticisms about react were always considered boomer talk, but people drank the react koolaid and here we are. It's easily the messiest "modern" framework there is and "nothing" is intuitive or logical about it. The react devs themselves go into tangents in the official documentation about it. And the worst part? The react way has infested other frameworks as well and it's just downright tragic.
@@punsmith - if I could like your comment 1000 times I would. Nail + head. React has become a total unintuitive hot mess; even “experienced” people don’t fully get how this really works and when…and to add more misery, millions of people are writing god knows what using this hot mess of a library (is it a library? Oh no wait, it’s pretending to be only that when really it’s a core “module” for an actual full size framework. But good old Facebook devs couldn’t be bothered to add anything else required to make proper app; like fetching data, routing and so on - they left that hard stuff up to others and now we have a zillion combinations of trying to do the same thing). God help us.
@@DauntingGecko Glad you agree. But I feel one of the biggest gripes is something people seem to "love" react for. JSX. They LOVE going into tangents why it's the only proper way writing your templates, while claiming it is "JUST" Javascript unlike Angular, Vue or Svelte. No. Nonono. JSX is not just Javascript. If it were, you could simply take it and use it anywhere, but you can't. The code has to be transpiled into valid HTML, making it what? Exactly, just another template engine. If one were to say, they enjoy this more, all fine. But people act as if react held no magic and was "pure". Incidentally, react developers began propagating that insane insistence on "purity". Suddenly everything had to be a pure function and anything that looked "declarative" was the true villain and that you should end yourself. You had react developers convulsing at the mention of classes and suddenly the Web was populated by thousands of messily written blogs only to mention how evil and bad classes and OOP was. Only react was pure. Pure JS, pure genius. Also, don't forget how people SUCKED off Dan Abramov for the worst library that ever existed and it will never change my mind. It tied into insane expectation of purity. State. Redux created a monstrous mental model that was an unfeasibly unmaintanable monster without peer and yet you still had people claiming, that it was the only logical way. Why? Because it's for react of course!
I don't see a component rendering 2 as a big issue. I try to avoid useEffect as much as i can, but some times is really useful for specific cases other than side effects. I get it that "should" be used only for side effects, but i don't see why it is a problem to use it to set states. I think we are still overthinking as usual if we compared now days with back in the days where we were rendering a whole page with refresh and no one was complaining. Rendering a component twice with no bugs is not a huge deal.
The example at 12:36 only work by chance, as passing items (array) is the same as passing no dependency at all. The dependencies of useEffect, useMemo, useCallback etc., aren't some magic observer-listener, they're simply a list of stuff to compare after each render. Since its a Object.is() shallow comparison, passing an array or object of items is like not passing anything at all. Really, I think useEffect has nothing really magical or complicated. The unerlying issues of many react developers I think, is not really understanding how state and components work. Most of them think the state / re-render cycle is some sort of magic listener and that your UI "reacts" somehow to state changes etc (?). This misunderstanding just simply translates to bad useEffect, abuse of setState, unnecesary useCallbacks etc. React is so much simpler if you understand how it works.
You are correct. The problem is that React has provided a poor abstraction, which is why you need a deep understanding of React to use it well. Developers shouldn’t have to understand all of the underlying implementations to use the abstraction, that’s why we’re using an abstraction. I believe other libraries like Vue and Svelte provide better abstractions, so while React May be just as useful for senior developers who know what’s going on, a lot of problems will come up for everyone else.
@@tomparke2407 My comment goes in another opposite direction. You don't need a deep understanding of React to use it well, because there is really nothing deep about React. That's the point. Assuming there's something deep about React is what I believe leads junior developers to use it as a magic tool rather than a very minimal and straightforward library. I blame "tutorials" and "influencers".
"Passing items (array) is the same as passing no dependency at all" is NOT technically CORRECT, because let's say the Cart component re-renders because it's parent re-renders, and in this case having no dependency array will cause the effect to run whereas having `items` in the dependency array will not cause the effect to run. The statement that you said is only true for re-renders that happen because of a change in some state that is defined within the component.
@@som.shekhar In this context is the same because items is local to the same component. What you say is true just by chance of how the lack of dependency array is evaluated, not by virtue of "items" as a dependency doing what your junior dev may think it does. If you had your "items" state in the parent, passed it to the Cart component, and used [props.items] inside the Cart component's useEffect, same story. The point is, these items will always evaluate as "not equal' no matter what and its a useless dependency. The correct choice is not using an extra "setState", as the presenter explains. The reason junior developers tend to do this kind of "setState inside a useEffect things" is normally cause they assume that to display data in the UI subject to change in a "react" way, it must be wrapped inside a state, which is simply having magic assumptions about it.
Obviously you would not create a separate state and sync it using the effect hook, when you can simply derive it, but it's important to understand how and when your dependencies change. It's not correct to generalize that putting objects in dependencies is useless, it can definitely change the way your effects run (as mentioned in my previous comment), provided you understand how object comparision works in JS.
why react renders twice in strict mode? - This is because then you can see if your components is pure or not. I found it very useful and it has saved me a few times. What is so difficult to understand about this? people need to read the docs and not judge the framework, it's not reacts fault if you did not understand the reason or made no effort to read the docs
The title of this video is quite misleading since the conclusion of this video is basically "Don't use useEffect, instead use libraries that probably use it better". I partially agree with the fact that sometimes its better to use a library instead of reinventing it, but there are times or requirements where adding a whole library just to avoid using something that React has in place for a reason is a bad idea. I think the problem comes from people not understanding useEffect properly. I usually use useEffects to wrap small logic in my components and never had any issues with it because if you know how exactly useEffect works it is actually very predictable and easy to work with. My rule of thumb for useEffect is, as long as its simple enough (ie. one dependency, onMount) its fine, but once it starts to get complicated I switch to a state management library, usually redux.
10:22 _"say, over here"_ ... *WHERE, BRO, WHERE?!?* I'm literally watching the whole video just to know. 10 minutes spent on explaining the nature of the issue, only 5 seconds on an elusive solution wrapped in mystery! *Where do I put the action?* Inside the component (just outside useEffecf)? Above the component? What if I need to store the result? You said "don't set state in useEffect" so... Where? How?
They meant if you put your logic within the event handler itself (like an onClick handler) it will only execute once when that event occurred. This is better than, for example, doing some setState within the event handler, and then performing the logic in a useEffect that has that state as a dependency.
@@theRynti Thanks. But correct me if I'm wrong: when the event handler is a function then it's better to put it in a callback (useCallback) so that it doesn't block the whole system. And callbacks have dependencies arrays, so it's back to square one.
13:49 Would be great if React forced us to add the deps array by throwing an error or a warning. I just don't see any reasonable case when useEffect without the deps array could be used.
this is the reason why i migrated to flutter lol, react doing so many things and then left em, create new one and bullies if someone already comfortable with the old method
14:00 seriously what?! I am an amature programmer who did react for fun five years ago, and then watch the React creators speach about hooks when it was release.... and even I know and understand these things... why do you even need to say them? Is there someone out there who did not understand immediatelly that useState and setting that state in useEffect will cause a loop?
So functional components introduced useMemo, useCallback and useEffects and made them necessary for simple, basic component behavior. What are the benefits here ? I mean true benefits, not some slogan like 'easier to understand' which I think is totally not true. I am learning react and when I saw class components they made sooo much more sense to me. They render in accordance with lifecycle methods which is logical, and they don't reinitialize all their methods on re-renders.
Hooks were optimized to attract new generations of developers that had no experience yet, was optimized for them, but it made it counterintuitive for the experienced developers. They should not just throw hooks in function components because is not correct js. We should bind the hooks from outside to the function components like it was when using redux.
I don't understand why all this noise and complaints in the comments about React. React is a library. It gives you the toolset and you are in charge of it.
Yeah seriously...tons of clueless people.. UseEffect may be a foot gun.. but an idiot still has to pull the trigger. Take the time to learn to leverage the tool properly.
I am guilty of misusing useEffect in a number of cases. Thanks for the clarification! ...looks like I got some rewriting to do but that keeps it fresh right!?
Some of the examples are originally bad example itself, not 100% mean useEffect it self is bad, its just badly used, for example the setState in the useEffect, people should not do that anyway, because state change should be triggered by UI events instead of other state change.
You need to see what those libraries are doing behind the scene. Closing the eyes in the daylight does not mean it is night for all. they are using the useEffects more than normaly a developer do
I feel like a big problem here is that React doesn't seem to have a clear-cut way to handle promises when rendering a component, and useEffect has become a sort of work around exploit to fulfill that very common need.
I use useEffect in other frameworks (flutter, vue.js) but it works the same way. I don't understand this talk because it all seems very obvious. Why the hell would you use useEffect to listen to state changes just to open something? The examples he gives are just bad programming Edit: ah I see the point of the talk now, he just wanted to plug his own startup (stately)
@@wlockuz4467 I have a confirmation modal component that accept isDone prop, When the Prop change to true I want to close the modal, useEffect(()=> { if(isDone) { close() } },[isDone, close]) is this can be done without useEffect?
@@moutafatin whatever function is doing the "done" (and setting isDone) can call another function at the end that has the logic you previously put in a useEffect. Maybe then you wont even need isDone?
@@moutafatin Is there an onSuccess callback available? That would be a better place to trigger the action than listening to transitions of a state variable
So React introduced something and based on the documentation and examples they provided, people started to use it as recommended, then React devs figured out that this could be abused badly so they decided to introduce some "safeguards" (which people will ignore anyway). Well done again, React
It just sounds like you just want to complain; none of what you've said is either true, or intellectually honest. None of React's examples ever approached useEffect in that way, and it was never recommended to be used that way. They didn't "figure out it could be abused" - they saw the community perpetuating bad practices with useEffect patterns, which led to local errors, and realized there was a disconnect in logic. The "safeguard" was put to stop a developer from locking up their browser from an infinite loop cycle. Literally no dev would/could just ignore that and have a functioning machine.
The answer: use libraries that use useEffect so you don’t have to see it.
Thanks
lol
but he needs 30 mins to talk about that
exactly
yep, total true. Give me back 20 minutes
Goodbye useEffect shouldn't be the name of the talk, all those examples, useQuery, useLoaderData are actually using useEffect under the hood, more like "Hello dependencies"
As always with talks like this, you are saying goodbye to using useEffect inside of your component code. The fact that useEffect is used elsewhere in the app doesn't change the fact that you are removing it from your component code itself. Abstracting away messy code is good.
@@anarchoyeasty3908 Then call it "Abstracting useEffect", everybody gets it, show an example of custom hooks and lead into libraries that are better maintained than your custom silly code. The talk/talks would be less confusing ;)
I think he got the problem right: using useEffect to declare asynchronous logic is not scaleable. One solution can be to use things like useQuery which will somewhat simplify that stuff. When using Redux you can also use thunks and saga to avoid chains of useEffect calls.
@@anarchoyeasty3908 "Abstracting away messy code is good."
Messy code will always be messy doesn't matter if its abstracted away.
@@wlockuz4467 But it's not messy it's just a bit complicated or voluminous. Abstracting that away makes it less complicated and less voluminous.
Now this talk compared to the previous one is much more helpful. More examples, more time to explain the problem and solutions, and a lot less promotion of XState. Great talk, David, thank you!
agreed.. previous talk look like XState promo
and no ROUND looking brackets (that are actually [] square brackets ) like in the last talt
XState is fantastic though. You really should try it out.
this one looks like a promo talk as well.
My favorite useEffect is the one which won't show up but then miraculously appears. You know `Rendered more hooks than during the previous render`. Love that. Especially if you don't know why because there are no conditions which prevent a hook from executing.
If you have a return statement before a hook, you'll get that error. Make sure all your return statements come after all hooks
@@1OJosh Which would mean that I had a condition which decides if the return gets ecevuted or not but there is no conditon or return like I already mentioned in my comment above.
@@thejezzi5219 Then maybe you've got a condition before a hook, like if(something) useHook()
There has to be something like that somewhere. Are you able to consistently reproduce the error? Are you sure it's definitely happening at random?
Could be an external package causing the error as well, I'd check them too
"It seems really cool. Terribly named. But, you know, that's the future."
Sums up tech nicely
import a big library, learn its syntax and internal working but do not use a simple useeffect. thats what the reacts devs wanted to do right.
Maybe u should keep playing free fire
So React introduced something and based on the documentation and examples they provided, people started to use it as recommended, then React devs figured out that this could be abused badly so they decided to introduce some "safeguards" (which people will ignore anyway).
Well done again, React 👏
Absolutely! I'm a full stack mostly FE dev in React and am not a fan of React and how complex apps need to be constructed. I've worked in other FE frameworks that seem to be better but are not as popular as React... hopefully that changes soon.
@@DevMeloy I can relate to this. Also, while React seems good in theory, I'm yet to see a project, which is not a mess (or tend towards being that). I don't know the reason of this, and maybe it's just my poor experience, so I don't want to generalize, ofc.
"What matters is being popular" 😍😍😍😍
@@blood_rose_queen 1 million flies can't be wrong, right
@@SourceHades This is the way! Yes, as I said React pretty much looks good on paper, but not 2 years into a rushed project with 30 devs 😭
I find it hard to believe that I have to install another library to perform a simple fetch call because React dislike its own useEffect-based solution. Thanks, React
i knew that there was something wrong when that shady dude tried to sell me his javascript course for 15$ 3 years ago, i can't believe how much i've sacrificed for money 😭.
You can do whatever you want, but react-query (while yes, another library) is great for this purpose--even if there weren't anything wrong with useEffect.
@@dweblinveltz5035 It can be the best library ever, but the problem is not using react-query; The problem is React creating the useEffect hook to handle effects such as data fetching, then discouraging this use case without providing a React-only alternative.
So, according to the new React "rules", the only viable way to perform a simple fetch call is by using another library.
@@dweblinveltz5035 The use hook is the alternative, but unfortunately it’s not available yet =(
If they had released the use hook before “deprecating” the useEffect it would have been great.
@@theindieprogrammer For simple fetch, I usually create custom hook (with useEffect in side) to handle data fetching. But yeah, it is much simpler to use something like react-query to do that job for you.
Sooo interesting. It goes to my watch later playlist.
which I won't watch anytime soon 😆😆
@@dreamerslab 😂😂😂 I will I am very disciplined !
I wasn’t expecting that my comment would make people 😂
@@codewithguillaume I add videos to watch later all the time but hardly remember to watch them again. The only time I watch again is when I am stuck.
@@dreamerslab interesting I think it’s how it works for a lot of people - for me I never have videos to watch - in even struggle to find new ones and get frustrated haha
Typical web development - hooks come out and everyone is like "wow this is so much better than class based components because we have no this to deal with we can combine stuff logically and no spread it across different lifecycle methods, etc. etc." which are definitely good points.
The problem I see is that hooks and useEffect in particular were glorified like "this is the way", then a few years later - "useEffect can be really bad, even the name is confusing". Then we have another solution to the problems useEffect might bring. So now I just expect this solution to become problematic as well and people would have to find a solution to the solution. But I guess that's just how stuff is, we have numerous examples, like functional programming being an old paradigm and getting revived in recent years as the way to go. My conclusion - there is no one perfect way of doing anything especially in programming, what is modern today might be an anti-pattern tomorrow and it all comes down to personal preferences, marketing of the idea/approach, having good documentation, etc.
From everything I've seen poor use of useeffects comes from devs never bothering to learn how react even works. Then they just complain about hooks. Learn how it works and you won't shoot yourself in the foot and write rubbish. The old docs were bad though, the new beta docs are good
@@ChillAutos I agree, for sure new and better ways come up. I was fine with class based components when they were the thing even though I have seen a few of their downside along the way. Same with hooks, so yeah whatever the technology, you should really have a good understanding of what is going on and how to use it, just as you said so you don't write rubbish or make videos like - why "something" is the wrong way.
Well, it can also be called: progress. That's how we went from 8086 to Core i9 via small deprecative steps over the years.
@@VortechBand Absolutely! Going for example from class components to hooks and now having further solutions for the "downsides" of useEffect, this can be considered progress. I don't want us to stay with 1 way of doing things and stick to it forever and ever and not make any progress. What I am up against is how things get presented with a lot of hype in a marketing style like "this is the way" because it sounds contrary to as you said progress, it's like well "Eureka" we found the solution that is "THE Solution". I would like something more objective, like "we've seen how this played out and we see this and this issues, that can be remove/minimised if we alter out approach to this".
Technology only eveolves, and That is not a problem. It is how everything is, especially in development.
i felt the best answer is going back to class components when you WANT be sure didMount, didUpdate, didUnmount works as expected, not adding another lib that want to implement class components lifecycle control within functional components.
What an intuitive framework 😤 I learned a couple of things, but what I am hearing is using React to communicate with an API is wrong and I should be using React features that don't exist yet or another library
Regarding fetching data, there was no explanation for how third party libraries handle it. You just said let these other people abstract it for you so you don't mess up, without explaining the abstractions used in remix, next, query, etc
I’m with you. How could something as simple as fetching data not be possible without a 3rd party library
@@jackhedaya571 React is still in beta, but we the “clever” hipsters use an unfinished beta in production
spoiler alert: They all use useEffect
react really has kinda turned into a non standardized weird library comparing it to web standards. Nowadays i much more prefer SolidJS or any Library that does not get me to download 20 libraries to make a simple fetch or have virtual dom-magic maxxed out for simple change detection
React devs: we created a monster.
"And now it's up to all of you guys to slay it"
Yes useEffect calling 2 times. Finally I got the solution. Thank you sir🙏
I really don't struggle with useEffect because I don't use it when stuff gets complicated. I don't want to declare my async logic in JSX or with useEffect. That's why I'll use redux-thunk and redux-saga to remove all that logic from the components. So the components can be purely reactive.
Exactly! People don't understand useEffect properly but decide to use it anyways then run into problems and call it bad design. As devs its our job to understand the technologies we work closely with.
Sooooo true. I am using RTK Query.
remove redux-saga bro
@@oleksandrfomin326 exactly, I don't known why we shoud use redux when UI state we have Context Api and server state we have react-query/swr
@@tienlx97 I totally agree with you. I really don't understand why we need a single Redux store for multi-state management. They are standalone states in their own component. We are focusing on single-page rendering with minimal state management while Redux asks us to manage states and methods in one store.
In 15:42, is the `setIsOpen(nextIsOpen)` safe? I always think that when you derive next state from current state, the updater function MUST be used.
The mess and technical debt React has introduced to the world should be at some point be measured in time and resources lost . Companies that adopted React without the teams necessary to maintain it will end up spending thousands of $$$$ to re-write their applications in something else ( by the looks of it Svelte, or Vue, or anything reasonable)
people should read the design philosophy in react before saying stuff like useeffect is complicated. perhaps it s not the apps that we build that are not complicated enough for those that understand it, maybe it s just that some devs don t bother understanding how you should use this function and how it works internally and what it is supposed to be
exactly!
You're telling me the solution to a problem is to have more understanding of the tools you chose instead of adding more libraries/tools which you understand even less? BLASPHEMY!
_installs entire npm repository into project_
It feels like the solution with useEffect is basically using it with rxjs. For example the takeUntil operator is op for clean ups, I wonder why rxjs didn't pick up with react community.
The problem with Suspense is that it’s not fine grained enough. For more vertically stabile less jumpy loading experiences you actually want nearly identical html with additional loading styles applied. Having a fallback should be an anti-pattern for pretty and impressive feeling things. It feels so good to transition from some placeholders to more fully loaded content with minimal transitional animation for only some text and some images.
React has never been able to handle fetching data correctly. I don't know what the disconnect is.... I feel like React just wanted to build a rendering library and pretend that async/await, promises and fetching data didn't exist and it wasn't their responsibility.
Leading to componentDidMount/componentDidUnmount, useEffect,and Redux Thunks. ALL of which are horrible hard to use designs... I just wish our components could be async functions.. but apparently they've coded themselves into a corner and can only do that on the server....
Well, that's exactly what it is. React is the View in MVC. Fetching data is the responsibility of the Controller, so it checks out.
@@echobucket nextjs now allows you to just use the await keyword
People often miss reading the whole thing, useEffect runs twice only in development, not in a prod build
That is because of strict mode
@@abdulsalammohammed8045 Exactly, not a big deal though, just remove the strict tag.
At the moment, yes, but a future version of React might run useEffect some unknown number of times because the component could sometimes get unmounted and remounted automatically. The point is that you need to change the mental model of how you use useEffect so that you never depend on the component being (un)mounted.
Here's a good explanation from a blog post I found: "Such a decision was made by the React team, as in the future, they’d like to add a feature that allows React to add and remove sections of the UI while preserving the state. As it requires components to be resilient to effects being mounted and destroyed multiple times, an additional check has been introduced."
@@SourceHades makes CI/CD so simple and straightforward. /s
Most topics he presents start with "you remember when I said you should do this...well no quite" the entire talk is "not quite/most of the times/usually". Why even learn the framework if in 6 months it changes 180 degrees, just makes it a pain to maintain long running products.
I think useMemo is important not only to memoize the cost of computing some value, but also to stabilize values as they may be passed down as props, to an unknown number of components of unknown implementation, and in general in React apps they can be more efficient when components inputs are not changing unnecessarily... If it's not a primitive then the usual shallow compare will fail when a new object is created on each render. useMemo should be used as good practice imo.
Great talk, agree wholeheartedly on the main topic, useEffect, thank you!
Haww, I only useEffect and useState from last 2 years. I have never used others. One of my components has 10 useEffects. I was kinda proud of them. Even patted myself in the back and praised react for being such a nice framework.
nobody in the right mind will use xstate as a primary state management solution. zustand/jotai/react query/recoil might be solutions. React should've stayed at the "simple view library" level and promote some other, sane, solution for state management. maybe reactive streams. as a person using React from its beginnings, I still think that maybe half of their development now is innovation and the rest is just complication.
1- What if we want to call it once for every re-use? We can't have it outside.
2- if one specific thing changes in prop do something and using custom hook is same thing
React is creating new problems, to solve old problems. Thats how I see this.
This was a great talk. I am glad state machines are making noise in the web technologies.
You could do and remember all this crap and install frameworks into a library just to do basic stuff, or just use Angular which is a stable framework, much more straightforward, class based, and just works.
You don’t have to install another frameworks in a library, maybe another framework in this framework, because React is a framework disguised as a library for marketing (and adoption) purposes
@@adrianvmois9426 That's not true, I've been using and watching since 2013. It's a library that's been trying to become a framework for years that's constantly been changing and is still lacking a lot that a framework needs to have. Despite the addition of hooks etc, people still add redux and saga and all kinds of things to be able to work with React properly. It's not a framework disguised as a library, it's a library trying to become a framework. It literally started as just a way to insert JSX into HTML and render that. That's all it used to do. And it still sucks at state management on its own without redux and managing async state without saga. And doesn't even begin to offer a lot of what the other frameworks offer. Some people even think Jquery is a framework, but it's not.
I can't tell you how much I don't want to import a state machine into front end code...
Code gen that results in non-native code is just bad. If it at least resulted in a few boilerplate JS components I would be ok with using those as a starting point.
but why do React 18 run useEffect twice when has empty dependencies? Isn't it counter intuitive or is it has other application that React
It only happens when you turn on StrictMode... and then it only happens in development. Its not a terrible idea. This talk is kinda jank.
@@mattgreenberg3207 It's a terrible idea because your production build runs differently than development so you need to test your code in both environment to make sure that your app works as intended
Is a rushed and not fully tested library that should be in beta, not in production.
Excellent one! Really usefull also since the new docs came out from react, first one I red was actually you might not need an effect, and it change my view of react completley!
Thank you David, your talk may help the future of components who have been through so much regarding this topic
Hopefully vue or svelte will start to be used more
When you advice to use external libraries/frameworks to avoid doing something in a library, you know it's a bad one. I've been thinking that class components was a lot better. Also I am questioning why did I even switched to React, I would be fine and never think about all this if I was using Angular.
Its not that React is bad, its just that people don't understand how useEffect works and end up using it wrong and complain about it. I think one of the major reasons for it is the shift from class to function components.
The problem is React is a library. It was meant to be a library to create basic UI. UI which works and changes itself based on state. All other stuff like async data fetching, SSR, bundling, routing, etc was not supposed to be in it. It was upto dev to add it however they want.
But that of course became complicated, React team is still trying to figure out how to provide these capabilities, while still staying into the relam of library and not turning into a full blown framework. NextJS for e.g. is something I would classify as framework.
@@ishandiablo No, the issue is how they included incorrect examples in the Docs and people started using it.
I've literally searched useEffect in reactjs docs and found a "Bad Example of useEffect".
No fam, it's just represented badly.
@@wlockuz4467 Yes but if thousands of people are doing it wrong, I think the problem is somewhere else. I'm using React but I feel frustrated about this 'oh we didn't intended this when we introduced hooks' statements.
At 13:13, how can the total get updated when items change without useeffect?
@Hongyu Chen yea, when we want component to rerender our first choice is useEffect and forget that state update also makes component rerender.
As a developer who has never been in a very messy React codebase, I'm wondering what React got so wrong that someone is advocating for imperative code over declarative code. Like, something is seriously wrong here.
Oh trust me, you haven't seen the half of it. Although I prefer hooks, I got to miss the simplicity of componentWillUnmount. Like, ok, the component is about to unmount, so I want to gather such and such information from such and such inner components through references, bundle it up and dispatch it to the state. Can I do that in a useEffect(()=> { .... return ()=>cleanup, []}? No, I cannot because my cleanup has dependencies and the return statement of useEffect(....,[]) will run on unmount only when the state is clean and there are no dependencies, oh, and the inner components are destroyed too. When you get to need something that will run just before the destroy cycle begins, you are left with horrible messy ideas that make your codebase atrocious, horribly atrocious.
The React team should give a hook or something that performs exactly like a componentWillUnmount, so people can gather data, do any final stuff they want to do and then let the component go.
React’s declarative data driven aspect has always been about what you see. Some things always have to be imperative, that’s how events work. The beauty of react is that there’s always an escape hatch to let you work around the limitations.
@@Diamonddrake that is NOT how events work. In React I've noticed a lot of developers confuse the mechanics of how React has to work with best practices. Maybe it would be helpful for you to try out another framework sometime.
@@mfpears you are being presumptuous, I am a professional software engineer and I maintain code bases across a variety of frameworks and technologies. Events are by definition imperative. Events hook into JavaScript through callbacks in the browser engine and they do so imperatively. React and react minded libraries hide those details as much as possible.
@@mfpears I watched your video, I feel like the title and angle is a strange approach. None of your 5 examples are reasons why imperative programming is bad, they don't really draw any lines (you can derive state and keep data close to where its used in imperative programming and you the other points are all subjective). A better approach would be suggesting to be more reactive when possible. I like react because I do enjoy reactive programming. But If you limit yourself exclusively to abstractions that follow a paradigm your core language does not then you are forcing yourself to fight against their limitations. My point is there are times when an action can't be reactive, specifically an event. if you want to do something that doesn't depend on state, then to do it reactively you need to make up some state for it to depend on just to make it happen. If you wrap your events in an observerable, it doesn't just become reactive. If that's what you are thinking then I believe your mental model off. Something being imperative isn't bad, its just not always the best choice. When an event happens like a click and you change some state, that is an imperative action, even if you wrap it in a stream listener and use that to derive new state from existing sate. But you def don't want to manually crawl the browser DOM and update divs everywhere manually during an imperative action. Limit your imperative actions to permuting state and invoking effects that are not state based. You can jump though hoops to keep it declarative, or you can write good code that breaks pretend rules sometimes. Re-rendering an entire system because a number changed is a reactive code problem that can be difficult to fix if they are disjointed in the hierarchy and all your code isn't perfect, Just updating the single spot on the page is an imperative solution that its performant and can save the day. There's very few objective truths in programming.
15:29 line 6 - state is asynchronous
I like how we need external frameworks and state-machines to solve what is trivial problems in all other paradimes than react.
React is itself just a view library.
I mean dweb is right it is just a view library.
@@dweblinveltz5035 is a framework marketed as a view library
The primary purpose of framework authors is to lock you into their framework.
We were able to build systems before React, and one of the most important lessons to learn is that even the UI is just an I/O device and should be abstracted out of the truly important core logic.
I love how this sums up everything essentially wrong with react. You can have hundreds of conferences for years with people trying to explain how setting a value can go wrong. Can't wait for SolidJS to take the place of react. No surprises there....
Sad
xstate looks very powerfull and expressive👍
If it takes an entire talk to explain a core aspect of framework/library, then there's clearly a problem. React is whole lot of "but actuallys" and "you're doing it wrong"
What? You could dive deep into any feature of anything. Nobody needed to watch this talk in order to use it.
My criticisms about react were always considered boomer talk, but people drank the react koolaid and here we are. It's easily the messiest "modern" framework there is and "nothing" is intuitive or logical about it. The react devs themselves go into tangents in the official documentation about it. And the worst part? The react way has infested other frameworks as well and it's just downright tragic.
@@punsmith - if I could like your comment 1000 times I would. Nail + head. React has become a total unintuitive hot mess; even “experienced” people don’t fully get how this really works and when…and to add more misery, millions of people are writing god knows what using this hot mess of a library (is it a library? Oh no wait, it’s pretending to be only that when really it’s a core “module” for an actual full size framework. But good old Facebook devs couldn’t be bothered to add anything else required to make proper app; like fetching data, routing and so on - they left that hard stuff up to others and now we have a zillion combinations of trying to do the same thing). God help us.
Not incorrect but honestly there are so many ways to do something wrong in every framework
@@DauntingGecko Glad you agree. But I feel one of the biggest gripes is something people seem to "love" react for. JSX. They LOVE going into tangents why it's the only proper way writing your templates, while claiming it is "JUST" Javascript unlike Angular, Vue or Svelte. No. Nonono. JSX is not just Javascript. If it were, you could simply take it and use it anywhere, but you can't. The code has to be transpiled into valid HTML, making it what? Exactly, just another template engine. If one were to say, they enjoy this more, all fine. But people act as if react held no magic and was "pure". Incidentally, react developers began propagating that insane insistence on "purity". Suddenly everything had to be a pure function and anything that looked "declarative" was the true villain and that you should end yourself. You had react developers convulsing at the mention of classes and suddenly the Web was populated by thousands of messily written blogs only to mention how evil and bad classes and OOP was. Only react was pure. Pure JS, pure genius. Also, don't forget how people SUCKED off Dan Abramov for the worst library that ever existed and it will never change my mind. It tied into insane expectation of purity. State. Redux created a monstrous mental model that was an unfeasibly unmaintanable monster without peer and yet you still had people claiming, that it was the only logical way. Why? Because it's for react of course!
I don't see a component rendering 2 as a big issue. I try to avoid useEffect as much as i can, but some times is really useful for specific cases other than side effects. I get it that "should" be used only for side effects, but i don't see why it is a problem to use it to set states. I think we are still overthinking as usual if we compared now days with back in the days where we were rendering a whole page with refresh and no one was complaining. Rendering a component twice with no bugs is not a huge deal.
The example at 12:36 only work by chance, as passing items (array) is the same as passing no dependency at all. The dependencies of useEffect, useMemo, useCallback etc., aren't some magic observer-listener, they're simply a list of stuff to compare after each render. Since its a Object.is() shallow comparison, passing an array or object of items is like not passing anything at all. Really, I think useEffect has nothing really magical or complicated. The unerlying issues of many react developers I think, is not really understanding how state and components work. Most of them think the state / re-render cycle is some sort of magic listener and that your UI "reacts" somehow to state changes etc (?). This misunderstanding just simply translates to bad useEffect, abuse of setState, unnecesary useCallbacks etc. React is so much simpler if you understand how it works.
You are correct. The problem is that React has provided a poor abstraction, which is why you need a deep understanding of React to use it well. Developers shouldn’t have to understand all of the underlying implementations to use the abstraction, that’s why we’re using an abstraction. I believe other libraries like Vue and Svelte provide better abstractions, so while React May be just as useful for senior developers who know what’s going on, a lot of problems will come up for everyone else.
@@tomparke2407 My comment goes in another opposite direction. You don't need a deep understanding of React to use it well, because there is really nothing deep about React. That's the point. Assuming there's something deep about React is what I believe leads junior developers to use it as a magic tool rather than a very minimal and straightforward library. I blame "tutorials" and "influencers".
"Passing items (array) is the same as passing no dependency at all" is NOT technically CORRECT, because let's say the Cart component re-renders because it's parent re-renders, and in this case having no dependency array will cause the effect to run whereas having `items` in the dependency array will not cause the effect to run. The statement that you said is only true for re-renders that happen because of a change in some state that is defined within the component.
@@som.shekhar In this context is the same because items is local to the same component. What you say is true just by chance of how the lack of dependency array is evaluated, not by virtue of "items" as a dependency doing what your junior dev may think it does. If you had your "items" state in the parent, passed it to the Cart component, and used [props.items] inside the Cart component's useEffect, same story. The point is, these items will always evaluate as "not equal' no matter what and its a useless dependency. The correct choice is not using an extra "setState", as the presenter explains. The reason junior developers tend to do this kind of "setState inside a useEffect things" is normally cause they assume that to display data in the UI subject to change in a "react" way, it must be wrapped inside a state, which is simply having magic assumptions about it.
Obviously you would not create a separate state and sync it using the effect hook, when you can simply derive it, but it's important to understand how and when your dependencies change. It's not correct to generalize that putting objects in dependencies is useless, it can definitely change the way your effects run (as mentioned in my previous comment), provided you understand how object comparision works in JS.
if u believe me, the reason I like reactjs more than other frameworks is because of this magically useEffect lol
why react renders twice in strict mode? - This is because then you can see if your components is pure or not. I found it very useful and it has saved me a few times. What is so difficult to understand about this? people need to read the docs and not judge the framework, it's not reacts fault if you did not understand the reason or made no effort to read the docs
The title of this video is quite misleading since the conclusion of this video is basically "Don't use useEffect, instead use libraries that probably use it better". I partially agree with the fact that sometimes its better to use a library instead of reinventing it, but there are times or requirements where adding a whole library just to avoid using something that React has in place for a reason is a bad idea.
I think the problem comes from people not understanding useEffect properly. I usually use useEffects to wrap small logic in my components and never had any issues with it because if you know how exactly useEffect works it is actually very predictable and easy to work with.
My rule of thumb for useEffect is, as long as its simple enough (ie. one dependency, onMount) its fine, but once it starts to get complicated I switch to a state management library, usually redux.
10:22 _"say, over here"_ ... *WHERE, BRO, WHERE?!?* I'm literally watching the whole video just to know. 10 minutes spent on explaining the nature of the issue, only 5 seconds on an elusive solution wrapped in mystery! *Where do I put the action?* Inside the component (just outside useEffecf)? Above the component? What if I need to store the result? You said "don't set state in useEffect" so... Where? How?
They meant if you put your logic within the event handler itself (like an onClick handler) it will only execute once when that event occurred. This is better than, for example, doing some setState within the event handler, and then performing the logic in a useEffect that has that state as a dependency.
@@theRynti Thanks. But correct me if I'm wrong: when the event handler is a function then it's better to put it in a callback (useCallback) so that it doesn't block the whole system. And callbacks have dependencies arrays, so it's back to square one.
I thought useeffect only run twice in dev mod...
That's correct, strict mode is only for development mode.
side effects are the hardest thing in software engineering..... and the frontend is full of this.
Is there anything that can replace useEffect?
I love this hook called useAngular xD
react and its thousand different hooks and "features"
glad that i never had to use it for too long
Well Angular sounds fun now 🤣
13:49 Would be great if React forced us to add the deps array by throwing an error or a warning.
I just don't see any reasonable case when useEffect without the deps array could be used.
this is the reason why i migrated to flutter lol, react doing so many things and then left em, create new one and bullies if someone already comfortable with the old method
14:00 seriously what?! I am an amature programmer who did react for fun five years ago, and then watch the React creators speach about hooks when it was release.... and even I know and understand these things... why do you even need to say them? Is there someone out there who did not understand immediatelly that useState and setting that state in useEffect will cause a loop?
agg the EffectHell what a pain, very nice talk!!
Years later and the confusion is still not solved. React in a nutshell. For others, use preact signals or vue.
Where I can find more about the "just use()" hook?
Could you tell me what tool you are using for the presentation?
What the talk was about was "fetch your data outside the component". What people are saying "f*ck you React, give me encapsulation!"
do we have such headache in Vue ?
No, Vue is polished and fully tested, not in beta like this garbage.
seriously i need to save this video. watch twice or more .
There will be time that people post a video on "Goodbye, useState"! I'm Sure:)
I waited 28 minutes before David starts talking about Xstate)
So functional components introduced useMemo, useCallback and useEffects and made them necessary for simple, basic component behavior. What are the benefits here ? I mean true benefits, not some slogan like 'easier to understand' which I think is totally not true. I am learning react and when I saw class components they made sooo much more sense to me. They render in accordance with lifecycle methods which is logical, and they don't reinitialize all their methods on re-renders.
Hooks were optimized to attract new generations of developers that had no experience yet, was optimized for them, but it made it counterintuitive for the experienced developers. They should not just throw hooks in function components because is not correct js. We should bind the hooks from outside to the function components like it was when using redux.
I don't understand why all this noise and complaints in the comments about React. React is a library. It gives you the toolset and you are in charge of it.
Yeah seriously...tons of clueless people..
UseEffect may be a foot gun.. but an idiot still has to pull the trigger.
Take the time to learn to leverage the tool properly.
this is good, is there an article version of this?
That ending was awesome. Perfect.
witch presentation program it he using?
I am guilty of misusing useEffect in a number of cases. Thanks for the clarification! ...looks like I got some rewriting to do but that keeps it fresh right!?
Some of the examples are originally bad example itself, not 100% mean useEffect it self is bad, its just badly used, for example the setState in the useEffect, people should not do that anyway, because state change should be triggered by UI events instead of other state change.
What the app that he use to present?
That generated code is so cool !
I used Angular and React and prefer Angular as a Framework and its RxJS
useEffect runs twice only in a dev mode with strict mode, on productions runs once and this is on purpose.
12:45
If data comes from an outside source, then you have to use useEffect.
You need to see what those libraries are doing behind the scene. Closing the eyes in the daylight does not mean it is night for all. they are using the useEffects more than normaly a developer do
I feel like a big problem here is that React doesn't seem to have a clear-cut way to handle promises when rendering a component, and useEffect has become a sort of work around exploit to fulfill that very common need.
I use useEffect in other frameworks (flutter, vue.js) but it works the same way. I don't understand this talk because it all seems very obvious. Why the hell would you use useEffect to listen to state changes just to open something?
The examples he gives are just bad programming
Edit: ah I see the point of the talk now, he just wanted to plug his own startup (stately)
I always consider it to be used for "Side Effects" not "Effects" which might change the way how you are using it.
What will be next? Goodbye useCallback, useMemo? Goodbye React?
The idea that I should handle side effects inside of event handlers sound soooo bad to me though
What is alternative?
Don't those libraries already use useEffect?
How about this situation? when a prop value changes I need to do something
Can you elaborate?
@@wlockuz4467 I have a confirmation modal component that accept isDone prop, When the Prop change to true I want to close the modal, useEffect(()=> {
if(isDone) {
close()
}
},[isDone, close]) is this can be done without useEffect?
@@moutafatin whatever function is doing the "done" (and setting isDone) can call another function at the end that has the logic you previously put in a useEffect. Maybe then you wont even need isDone?
@@heddshot87 In my use case the isDone prop is just the state of react query, isSuccess
@@moutafatin Is there an onSuccess callback available? That would be a better place to trigger the action than listening to transitions of a state variable
How to use add event listener?
what about the 6 vulnerabilities on cra
aren't they making it more complicated?
It's React, what do you expect
Imagine my face seeing this thing after finishing my morning routine coding a website using Svelte
useEffect is the most human of all react. Don't struggle, just enjoy
I have only one problem with useEffect when adding object to dependency list, only that
useEffect can get pretty nasty pretty quickly indeed. Beyond 5-6 dependencies shit really starts to hit the fan.
-useEffect()-
useQuery()
useSWR()
why not simply
-React-
Svelte
Vue
?
what?
So React introduced something and based on the documentation and examples they provided, people started to use it as recommended, then React devs figured out that this could be abused badly so they decided to introduce some "safeguards" (which people will ignore anyway).
Well done again, React
It just sounds like you just want to complain; none of what you've said is either true, or intellectually honest.
None of React's examples ever approached useEffect in that way, and it was never recommended to be used that way. They didn't "figure out it could be abused" - they saw the community perpetuating bad practices with useEffect patterns, which led to local errors, and realized there was a disconnect in logic. The "safeguard" was put to stop a developer from locking up their browser from an infinite loop cycle. Literally no dev would/could just ignore that and have a functioning machine.
What to do instead of writing setCounter() useState inside useEffect?
Handle it in an event handler outside of the effect.
@@lukafireman oh Okay got you thanks.