React js is a blasphemy for JavaScript community. React nonsense must be banned across world plane. This f library makes web development unnecessarily complicated. Angular is far better than svelte and react nonsense., because it leverages rxjs subscription, angular service make communication between sibling components much easier, developers know what exactly is happening. Svelte and react have confusing code. Developer experience matters.
@@Almighty_Flat_Earth wow you mad haha.react is not that complicated. but some aspects. yeah. mess. i used nest js a lot recently. people say its like angular for backend. liked it a lot. gonna learn angular one day
@@Almighty_Flat_EarthI was a backend dev my whole carier but last 2 years I had to use React every day with typescript and honestly I love it. It is very fast in writing and quite simple to me. As a backend dev who thought that will never do a front end I can recommend it to anyone :P
I really hate the haters in the comment section saying the channel should simplify the concept but the content is so hard, I think Kyle did a great job explaining, I thank him for teaching us more complicated stuff
If you ignore the warning, the onConnected function that the useEffect uses will be stale and cause bugs. For example, the effect could use onConnected function that is unaware of the latest loggingOptions when the loggingOptions prop changes.
@@xrr-1 isnt this happening in this case as well? useEffect would run only when url changes. When url changes we would connect to the room using the url and the onConnected would be called. even if logging options change, the useEffect wont run again and the onConnected function wont be called with the updated loggingOptions.
Is there a way to use the without experimental. I have package conflict otherwise I would upgrade but I just want this specific hook. Are there any 3rd party libs that provide something similar. I'm doing a lot of 2d canvas stuff where granular control of Effects and Evnets would be really helpful.
Why we can not using onConnected function outside ChatRoom? This function takes arguments so we don't need put it into che ChatRoom component. Could you please clarify this case?
@@rifwann Any value not added to the dependency array are not refresh inside a useEffect. If you want a value to be always up to date and not be in the dependency array you need to use a ref (useRef).
I didn't even know. this hook makes so much sense. I believe you could fix the problem you presented wrapping logging options in a useMemo and so on, BUT DAMN i JUST WANT TO RUN IT AFTER AN EVENT, LET ME DO IT, REACT. This is awesome. Loved it. Thanks
I think you mean a useRef. useMemo would not help since you would still need to update your method. useRef is the method I use because my project is huge and updating to the new non fonctioning router is not an option.
I ran into those issues and I hate it so much. They are trying to solve those problems by making react more complex than it was. I always trying to avoid useEffect. And now they're adding more use use use and this is scares me. Imagine react without useEffect 🔥
React internal team is working on this. You just might not heard about it because it's not promoted or mentioned by the youtubers, influencers, etc. ua-cam.com/video/lGEMwh32soc/v-deo.html
Because the useEffect hook will use the old version of options. You'd need to wrap them with a useRef hook. I believe that's is how it's done under the hood.
You will start to ignore these warnings all together and you will forget to add some dependencies that may not be critical, but not including them will introduce bugs, that may be hard to find. We used to disable the warnings if we did not want to include something in the deps on our project, but later we found that it itroduced some bugs (even though we disabled it very rarely). So from that point we promoted it from warning to error, and forbid to disable this eslint rule and we did not encounter any similar bugs ever since. So I very much recommend to use this eslint rule and even have it as error not just warning.
There is a big misconception that new frontend developers tend to have because they just quickly moved to these frameworks instead of learning the basics first. If you only provide the url in the dependency array, the onConnected function will always be called with the initial logging options when the effect was created. In this case, the benefit of the new hook is that it will keep the logging options up to date, without having to recreate the whole effect
@@ajfalo-fi3721 I don't get it what do you mean by "new frontend developer". If it's for me. Let me ask you a question, do you know me? Do not pass judgement without knowing the person. BTW thanks for your response.
Please, someone can explain me why react warns about the onConnected function only after Kyle added the loggingOptions parameters ? At the beginning of the vidéo on 1:30, why we dont see a warning telling that useEffect has a missing dependency, the onConnected function ?
If I understand, it's because onConneced only changes when url changes. So it's not an extra dependency. When url changes, then they've both changed, and that's it. You don't track onConnected separately. I don't know JavaScript by the way but knowing low level programming does help me understand. Not that I understand much though. My head hurts when I try to understand JavaScript. Apparently each variable has 2 functions that are implied, some set and get, as well as an array for each. An array of functions for each. When set is called, it sets the value, and calls all the functions of the first array. When get is called, it calls all the functions of the other array and it returns the value. That's probably how it works. So what useEffect does, when it's called, is, it takes its second argument which is a lost of variables and for each it tells it to add it's self on the end of the setter array, something like that.
Because the useEffect is updated only when the url change. So essentially if you would change loggingOptions and then change the url. The onConnect method inside the useEffect would be the old one with the old loggingOptions.
So this is another hook that wraps a function that can be called in a useEffect. But the function this hook wraps doesn't need to be a dependency of the useEffect, is that the jist? like is that the main difference between this and useCallback and useMemo?
My first instinct was also to ignore the warning. What I think didn't get enough stress in the video is that the onConnected function is an async one (not all callback are async), and when it gets called asynchronously at a later time, it is using the closure when url was last updated. this closure includes the onConnected definition and the logginOptions at that time. So between the time when url was last updated and the time when the async callback gets called with the earlier closure, loginOptions may have changed already which means the async callback captured an outdated closure. But I think the common unofficial way is to use a ref to point to the onConnected function and let async callback call the ref (what alibaba/hooks calls useLatest? great hook lib with not so good docs btw). Sincerely I hope this hook won't make it out of experimental, the solution seems worse than the problem it tries to solve.
Haha, I was thinking the same.. It seems like a pointless hook adding just sugar coating for people who can't figure out the many ways of doing that that already exist.. If I'm right, this behaviour can for example be achieved using a useEffect with dependency loggingOptions, which sets a ref of logginOptions, then set onConnected in a useRef too (or outside the component, taking in the ref as param..). outside the component (since logConnection is also outside, it makes the most sense..) const onConnected = (url, loggingOptionsRef) => { logConnection(...url, loggingOptionsRef.current...); } ... inside the component... const loggingOptionsRef = useRef(loggingOptions); useEffect(() => { loggingOptionsRef.current = loggingOptions; }, [loggingOptions]); useEffect(() => { ... room.onConnected(() => { onConnected(url, loggingOptionsRef). .. there is no need for 'onConnected' anymore, it could just be logConnection(...url, loggingOptionsRef..) directly here, if logConnection is changed to access current.. ... ? Shouldn't that work eaqually well?
@@fabienbroquard7690 Just like useImperativeHandle which is just a shortcut to what you can do yourself in a useEffect or custom hook by assigning ref.current props. I'm not convinced this hook does anything other than shut up the linter. Nobody can explain what it actually does; will have to dig into the source code.
I do hate this useEffectEvent, it doesnt looks practical. surely there are ways to tackle it without re-inventing hook just for 1 use case. (Although i dont know how its going to be)
No, this is a big misconception that new frontend developers tend to have because they just quickly moved to these frameworks instead of learning the basics first. If you only provide the url in the dependency array, the onConnected function will always be called with the initial logging options when the effect was created. In this case, the benefit of the new hook is that it will keep the logging options up to date, without having to recreate the whole effect
I was thinking the same. I assume, right now I would use a useRef with a function for such a use case. Might be interesting to check how useEffectEvent is implemented. 🤔
Nice. I recently was working on creating own useFetch implementation and I run in to the problems of passing url and options object. Read through react beta documention and found this hook.
Good explanation. Why no semi-colons? Pro Tip: I know you don't _need_ them, but it makes the code easier to read. Similar to how you're using curly braces even when they aren't needed on one-liners.
It makes sense but we dont really need to add dependencies we dont need even though react complains about it. Could just add more complexity for nothing
.... you add dependencies to let react know when to enter the useEffect. [] - enter the first time, just after render .... , [x] - enter after X has changed, [x, y] - enter after X OR Y has changed
@@erictremblay6867 I mean sometimes you know that certain values will be always the same, and maybe they will change just because they are functions (will change the reference) so in this case just don't add them to the dependency array
This is a big misconception that new frontend developers tend to have because they just quickly moved to these frameworks instead of learning the basics first. If you only provide the url in the dependency array, the onConnected function will always be called with the initial logging options when the effect was created. In this case, the benefit of the new hook is that it will keep the logging options up to date, without having to recreate the whole effect
@@ajfalo-fi3721 Sorry but you are wrong. I literally tested this example kyle has by keeping only url as the useEffect dependency and it always gets the updated loggingOptions whenever the url changes
It's hard to understand how JavaScript works behind the scenes. I really do wonder what knobs useEffectEvent turns to the lambda that you pass into it. It turns the variables of the lambda into pointers? It's too late to do that, they've been passed by value now. I really want to know. JavaScript scares me a little.
This doesnt make any sense. If you want to trigger your useEffect when certain dependencies change then ignore the eslint warning and include only the ones you want as dependencies. This hook just removes the eslint warning. The hooks warning should only be followed for useMemo and useCallback strictly. For useEffect we should use it per usecase
No what if u want to access the latest value of another value which is loggingOptions in Kyle's example, using the new hook will grants you latest value
In Next.js, if you try to use the useRouter hook inside a useEffect (router.push), it can lead to an infinite loop. This is because calling useRouter updates the router, which triggers the useEffect to re-run. Is the useEffectEvent hook a possible solution to this issue?
React is getting crazy with all these hooks now. Love React, but it’s getting out of hand. These other frameworks are doing so much more for us without all this bloat.
Force me to put anything in the dep array? I decide what I put in my dep array and not some weird lint rule. To be an experts means that u know what u are doing and not to depend on your linter…
Just put function outside the main module, and you should be able to use it as normal JS function just like any other functions declared below. You don't always need it to be in the same context as the main component. That's how you do it in a more clean way and simply pass the values, or even better delcare separate services module and import it....
Oh yeah that's right. Remeber that hooks allows us to manipulate JSX and data which are reactive. Often hooks trigger to run component again, so we don't want to re run the complex functions which are not dependend by value which changes. We can just move the functions outsiede the component and run it inside
@AJFA Lo-fi That's where you memoize function so it stays static till options do change. At the point when options do change, your function reference also gets updated once. Problem is react in functional approach slams everything at one place making it hard to grasp concept of dependency and callbacks that works with it, even experienced people get lost in control flow and mapping whuch function gets called in which iteration. P.S. you will always need atleast one function telling react about dependency, if not expect react to call it every render sinxe react calls entire component function and then effects do take place depending on those dependencies
Interesting what kind of crutch will require this new hook. Because it's already a crutch for useEffect. React nowadays is a crap. React's docs tells you, like - this is "useEffect" and you can put in deps array any variable that you want to watch for changes to run your useEffect. But, they don't put accent that you are not allowed to escape from deps array variables used inside useEffect. Otherwise, you'll have tones of hidden bugs. Isn't it confusing ? And at the end, you don't watch for changes variables that you want to watch, you are just obligated to fill the deps array with all the variables used inside useEffect. And of course you will spend a lot of time after, to debug this crap and make it called only when you need by covering your functionality in "if" statement, which often becomes huge. So not you are controlling the useEffect, useEffect is controlling you. Such a mess.
Anyone else overwhelmed with React this and React that, everywhere? There are a lot of other powerful JS projects. I wish React would just go away at this point.
React js is a blasphemy for JavaScript community. React nonsense must be banned across world plane. This f library makes web development unnecessarily complicated. Angular is far better than svelte and react nonsense., because it leverages rxjs subscription, angular service make communication between sibling components much easier, developers know what exactly is happening. Svelte and react have confusing code. Developer experience matters.
coming next: useStateEvent, useRefEffect, useEffectEffect
React js is a blasphemy for JavaScript community. React nonsense must be banned across world plane. This f library makes web development unnecessarily complicated.
Angular is far better than svelte and react nonsense., because it leverages rxjs subscription, angular service make communication between sibling components much easier, developers know what exactly is happening.
Svelte and react have confusing code. Developer experience matters.
@@Almighty_Flat_Earth wow you mad haha.react is not that complicated. but some aspects. yeah. mess. i used nest js a lot recently. people say its like angular for backend. liked it a lot. gonna learn angular one day
@@Almighty_Flat_EarthI was a backend dev my whole carier but last 2 years I had to use React every day with typescript and honestly I love it. It is very fast in writing and quite simple to me. As a backend dev who thought that will never do a front end I can recommend it to anyone :P
@@andTutin it's not about being complicated or easy. It's just a suboptimal tool.
Frankly it's dogshit
@@Almighty_Flat_Earth is Angular self closing tag feature celebrate end?
One of my main frustrations in react is getting solved, I am a fan!
I really hate the haters in the comment section saying the channel should simplify the concept but the content is so hard, I think Kyle did a great job explaining, I thank him for teaching us more complicated stuff
I believe what people hate is the hook itself not kyle.
This will make useEffect so much more usable. Thanks for covering this Kyle.
Can feel my brain growing 🧠
2:21, can't I just ignore the warning? What can happen
clearly was thinking the same, I'll just wait for an update on your comment
If you ignore the warning, the onConnected function that the useEffect uses will be stale and cause bugs. For example, the effect could use onConnected function that is unaware of the latest loggingOptions when the loggingOptions prop changes.
@@xrr-1 thank you, made me understand a bug in my side project, bless you
This logic get much more fragile against future changes.
@@xrr-1 isnt this happening in this case as well? useEffect would run only when url changes. When url changes we would connect to the room using the url and the onConnected would be called. even if logging options change, the useEffect wont run again and the onConnected function wont be called with the updated loggingOptions.
Is there a way to use the without experimental. I have package conflict otherwise I would upgrade but I just want this specific hook. Are there any 3rd party libs that provide something similar. I'm doing a lot of 2d canvas stuff where granular control of Effects and Evnets would be really helpful.
I have to say React is a big hack. It could be simpler. Thanks for the awesome video, btw.
Yeea buddy, lightweight!
I am not a native English speaker but listening to you is always very clear
3:40 why is that a problem? doesn't it make sense for onConnected function definition to update if loggingOptions change?
Why we can not using onConnected function outside ChatRoom? This function takes arguments so we don't need put it into che ChatRoom component. Could you please clarify this case?
When i faced that problem i just disabled linter rule for useEffect dependencies :) thanks for explaining the proper way
So you run your useEffect with outdated value?
@@erictremblay6867i dont get what are you trying to say, or is it even possible..
@@rifwann Any value not added to the dependency array are not refresh inside a useEffect. If you want a value to be always up to date and not be in the dependency array you need to use a ref (useRef).
Sir please please make a video on Cypress testing and react testing 🙏🙏
I also need this
and for this issue what about simply use a ref ? if we store logginOptions into a ref and use the ref value in the function it should work right?
This is what chatgpt suggested me and i am happy they it worked.
I had to do such stuff for my college assignment
Yes useRef to store the value and useEffect to update the ref. This is the workaround currently and this is what useEffectEvent does in the back.
I didn't even know. this hook makes so much sense. I believe you could fix the problem you presented wrapping logging options in a useMemo and so on, BUT DAMN i JUST WANT TO RUN IT AFTER AN EVENT, LET ME DO IT, REACT. This is awesome. Loved it. Thanks
No, a useMemo would not work
I think you mean a useRef. useMemo would not help since you would still need to update your method. useRef is the method I use because my project is huge and updating to the new non fonctioning router is not an option.
can u make a video on how to stay productive I feel u are one of the productive people I know
I ran into those issues and I hate it so much. They are trying to solve those problems by making react more complex than it was.
I always trying to avoid useEffect. And now they're adding more use use use and this is scares me.
Imagine react without useEffect 🔥
React internal team is working on this. You just might not heard about it because it's not promoted or mentioned by the youtubers, influencers, etc. ua-cam.com/video/lGEMwh32soc/v-deo.html
Also I agree, I hate dependencies so damn much. If React can get rid of them, it would be superb.
react class component makes more sense to me. Although It would be more verbose when the component has many props and states.
Why can't we use value in useEffect which out putting them in array of dependencies? Why does it requires? 2:45
How about we eslint-disable-next-line?
Because the useEffect hook will use the old version of options. You'd need to wrap them with a useRef hook.
I believe that's is how it's done under the hood.
is there a repository for this? I can't get it to work, the linter is still showing the missing dependency
What if I simply don't pass the unnecessary dep in useEffect ? What problem will it create other than showing a warning?
In some codebases like where I’m working at, if the amount of warnings exceed a certain number, I can’t push my changes.
@@daydreamer9469 that's interesting to know. But the boundary is created by your org. That is not related to react.
BTW, thanks for your response ☺️
You will start to ignore these warnings all together and you will forget to add some dependencies that may not be critical, but not including them will introduce bugs, that may be hard to find. We used to disable the warnings if we did not want to include something in the deps on our project, but later we found that it itroduced some bugs (even though we disabled it very rarely). So from that point we promoted it from warning to error, and forbid to disable this eslint rule and we did not encounter any similar bugs ever since. So I very much recommend to use this eslint rule and even have it as error not just warning.
There is a big misconception that new frontend developers tend to have because they just quickly moved to these frameworks instead of learning the basics first. If you only provide the url in the dependency array, the onConnected function will always be called with the initial logging options when the effect was created. In this case, the benefit of the new hook is that it will keep the logging options up to date, without having to recreate the whole effect
@@ajfalo-fi3721 I don't get it what do you mean by "new frontend developer". If it's for me. Let me ask you a question, do you know me?
Do not pass judgement without knowing the person.
BTW thanks for your response.
Nice, 👍 simplified example
Please, someone can explain me why react warns about the onConnected function only after Kyle added the loggingOptions parameters ?
At the beginning of the vidéo on 1:30, why we dont see a warning telling that useEffect has a missing dependency, the onConnected function ?
If I understand, it's because onConneced only changes when url changes. So it's not an extra dependency. When url changes, then they've both changed, and that's it. You don't track onConnected separately.
I don't know JavaScript by the way but knowing low level programming does help me understand. Not that I understand much though. My head hurts when I try to understand JavaScript.
Apparently each variable has 2 functions that are implied, some set and get, as well as an array for each. An array of functions for each. When set is called, it sets the value, and calls all the functions of the first array. When get is called, it calls all the functions of the other array and it returns the value. That's probably how it works. So what useEffect does, when it's called, is, it takes its second argument which is a lost of variables and for each it tells it to add it's self on the end of the setter array, something like that.
Because the useEffect is updated only when the url change. So essentially if you would change loggingOptions and then change the url. The onConnect method inside the useEffect would be the old one with the old loggingOptions.
nice, great explanations!
I bet this example would work out of the box in solid js without the need of importing weird hooks
Hey Dev I want video on useMemo and UseCallback I can not figure it out when to use and which one use
So this is another hook that wraps a function that can be called in a useEffect. But the function this hook wraps doesn't need to be a dependency of the useEffect, is that the jist? like is that the main difference between this and useCallback and useMemo?
You still need to listen to useMemo value or they could be outdated. The current solution is a useRef that is updated with a useEffect.
This is VERY interesting!
oh mannnn finally!!!!!!
My first instinct was also to ignore the warning. What I think didn't get enough stress in the video is that the onConnected function is an async one (not all callback are async), and when it gets called asynchronously at a later time, it is using the closure when url was last updated. this closure includes the onConnected definition and the logginOptions at that time.
So between the time when url was last updated and the time when the async callback gets called with the earlier closure, loginOptions may have changed already which means the async callback captured an outdated closure.
But I think the common unofficial way is to use a ref to point to the onConnected function and let async callback call the ref (what alibaba/hooks calls useLatest? great hook lib with not so good docs btw). Sincerely I hope this hook won't make it out of experimental, the solution seems worse than the problem it tries to solve.
Doesn't the prop change automatically trigger an rerender? So if logging options changes the component get rerendered.
Haha, I was thinking the same..
It seems like a pointless hook adding just sugar coating for people who can't figure out the many ways of doing that that already exist.. If I'm right, this behaviour can for example be achieved using a useEffect with dependency loggingOptions, which sets a ref of logginOptions, then set onConnected in a useRef too (or outside the component, taking in the ref as param..).
outside the component (since logConnection is also outside, it makes the most sense..)
const onConnected = (url, loggingOptionsRef) => {
logConnection(...url, loggingOptionsRef.current...);
}
...
inside the component...
const loggingOptionsRef = useRef(loggingOptions);
useEffect(() => { loggingOptionsRef.current = loggingOptions; }, [loggingOptions]);
useEffect(() => {
...
room.onConnected(() => {
onConnected(url, loggingOptionsRef).
.. there is no need for 'onConnected' anymore, it could just be logConnection(...url, loggingOptionsRef..) directly here, if logConnection is changed to access current..
...
? Shouldn't that work eaqually well?
@@fabienbroquard7690 Just like useImperativeHandle which is just a shortcut to what you can do yourself in a useEffect or custom hook by assigning ref.current props.
I'm not convinced this hook does anything other than shut up the linter. Nobody can explain what it actually does; will have to dig into the source code.
I do hate this useEffectEvent, it doesnt looks practical. surely there are ways to tackle it without re-inventing hook just for 1 use case. (Although i dont know how its going to be)
Thanks Kyle for this crash course!
When should we expect it to be officially out?
Hi Kyle,
I wish you health, strength and happiness!
I hope, that you will always go ahead!
Sincerely Kai
Isn't it is a solution to just leave the error as it is?
No, this is a big misconception that new frontend developers tend to have because they just quickly moved to these frameworks instead of learning the basics first. If you only provide the url in the dependency array, the onConnected function will always be called with the initial logging options when the effect was created. In this case, the benefit of the new hook is that it will keep the logging options up to date, without having to recreate the whole effect
That's why I love this channel always up to date
Either just use signals or use class based component
How to implement right now without experiment feature ?
0:00 - word typo "useEventEffect' instead of 'useEffectEvent'.
I am beginner , but can't we use , useRef to store options and then use useLayoutEffect to update ref current value and then return result ?
Don't need useLayoutEffect, useEffect to update the ref is ok no need to wait for the dom to render.
can i use ref for callback in this case?
Yes using useRef and a useEffect to update the ref is the current work around and essentially what the new hook does in the back.
Thanks
So is it the case that useEffectEvent is just a specialised useRef only for functions?
I was thinking the same. I assume, right now I would use a useRef with a function for such a use case. Might be interesting to check how useEffectEvent is implemented. 🤔
Nice. I recently was working on creating own useFetch implementation and I run in to the problems of passing url and options object. Read through react beta documention and found this hook.
better switch to Vue or Svelte guys
Hey, it would be great if you create a tt about netlify website (creating the whole website)
Thanks
Can you please make a video about Object Relational Mapping and Model view controller.
something wey i go disable. dey play
So... Basically a ref?
Good explanation.
Why no semi-colons? Pro Tip: I know you don't _need_ them, but it makes the code easier to read. Similar to how you're using curly braces even when they aren't needed on one-liners.
Looks like if you know what you're doing is easier to disable the eslint dependencies rule just for that line and problem solved...
How do you know that you have an up to date value?
@@erictremblay6867 if the effect depends on a prop the value will always be updated since the whole component and effects run when it changes.
Last I heard, they were planning on cancelling the planned release of this hook.
Is it
Hi Kyle, great as usual. I'm going to find a way to use the word "niche" today. It's a fine word.
pure React is starting to look messy compared to Next/Solid/other options =/
why not just have onConnected as normal function? I am missing the benefit of this new hook vs not wrapping it with a hook at all
He explained that. The method would not be up to date in the useEffect. Essentially calling an older version of the method with older value.
Great
need app that will stop two trains from colliding. useEffectEvent would work
better shift on svelte
Just turn on eslint for that line 😅
What if you just ignore that first warning in the first place. That's my way of solving those problems 😅😅
It makes sense but we dont really need to add dependencies we dont need even though react complains about it. Could just add more complexity for nothing
Exactly
.... you add dependencies to let react know when to enter the useEffect. [] - enter the first time, just after render .... , [x] - enter after X has changed, [x, y] - enter after X OR Y has changed
If you don't add the dependency the value will not be up to date.
@@erictremblay6867 it depends on what do you need to be up to date with
@@erictremblay6867 I mean sometimes you know that certain values will be always the same, and maybe they will change just because they are functions (will change the reference) so in this case just don't add them to the dependency array
// @ts-ignore 😂😂😂😂
Just disable eslint rule about hook dependancy array. It's a seriously naive rule, sometimes you don't want everything in the dependancy array.
That's exactly how you get bugs in your code
@@arjundureja Imo you should only follow it for useCallback and useMemo. For useEffect add only those which match your scenario and ignore warning
whats the potential bug, curious...
This is a big misconception that new frontend developers tend to have because they just quickly moved to these frameworks instead of learning the basics first. If you only provide the url in the dependency array, the onConnected function will always be called with the initial logging options when the effect was created. In this case, the benefit of the new hook is that it will keep the logging options up to date, without having to recreate the whole effect
@@ajfalo-fi3721 Sorry but you are wrong. I literally tested this example kyle has by keeping only url as the useEffect dependency and it always gets the updated loggingOptions whenever the url changes
It's hard to understand how JavaScript works behind the scenes. I really do wonder what knobs useEffectEvent turns to the lambda that you pass into it. It turns the variables of the lambda into pointers? It's too late to do that, they've been passed by value now. I really want to know. JavaScript scares me a little.
Why u don't just wrap it in useRef hook
Great explanation, thanks, Kyle for sharing this.
Fucking amazing bro
This doesnt make any sense. If you want to trigger your useEffect when certain dependencies change then ignore the eslint warning and include only the ones you want as dependencies. This hook just removes the eslint warning. The hooks warning should only be followed for useMemo and useCallback strictly. For useEffect we should use it per usecase
Exactly my thoughts, this just adds unnecessary complexity to your code
there is a chapter in new react docs about removing unnesessary dependencies
No what if u want to access the latest value of another value which is loggingOptions in Kyle's example, using the new hook will grants you latest value
Exactly, creating a hook to remove ESLint warnings is kind of useless...
@@ahmad1734 it would give you the latest value in the case when I just put just the url in the dependency as well.
In starting he said useEventEffect hook
it's not making sense, the code is more complicated, u have just to not add function in the params array.
if i should tel why
Please bring some MERN stack real time project
useless hook, just remove the dependency and the eslint warning is enough
or...you might be missing the actual point of usage from this hook?
can you share your pc wallpaper
In Next.js, if you try to use the useRouter hook inside a useEffect (router.push), it can lead to an infinite loop. This is because calling useRouter updates the router, which triggers the useEffect to re-run. Is the useEffectEvent hook a possible solution to this issue?
React is getting crazy with all these hooks now.
Love React, but it’s getting out of hand. These other frameworks are doing so much more for us without all this bloat.
Just more band-aids on bad designs from the React Team. Yay.
Force me to put anything in the dep array? I decide what I put in my dep array and not some weird lint rule. To be an experts means that u know what u are doing and not to depend on your linter…
Just put function outside the main module, and you should be able to use it as normal JS function just like any other functions declared below.
You don't always need it to be in the same context as the main component. That's how you do it in a more clean way and simply pass the values, or even better delcare separate services module and import it....
Oh yeah that's right. Remeber that hooks allows us to manipulate JSX and data which are reactive. Often hooks trigger to run component again, so we don't want to re run the complex functions which are not dependend by value which changes. We can just move the functions outsiede the component and run it inside
No, in this case it cannot be declared outside because it uses the logging options
@AJFA Lo-fi That's where you memoize function so it stays static till options do change. At the point when options do change, your function reference also gets updated once.
Problem is react in functional approach slams everything at one place making it hard to grasp concept of dependency and callbacks that works with it, even experienced people get lost in control flow and mapping whuch function gets called in which iteration.
P.S. you will always need atleast one function telling react about dependency, if not expect react to call it every render sinxe react calls entire component function and then effects do take place depending on those dependencies
Or you could just "eslint-disable-next-line".
better switch to Solidjs or Svelte and forget about useEffects and sh1t
React is a mess. I don't understand why it took so long for this to be added.
Or we just can do not put extra argumets into dependency array. And add disable eslint for this shitty line
useRef
Interesting what kind of crutch will require this new hook. Because it's already a crutch for useEffect.
React nowadays is a crap.
React's docs tells you, like - this is "useEffect" and you can put in deps array any variable that you want to watch for changes to run your useEffect.
But, they don't put accent that you are not allowed to escape from deps array variables used inside useEffect.
Otherwise, you'll have tones of hidden bugs.
Isn't it confusing ?
And at the end, you don't watch for changes variables that you want to watch, you are just obligated to fill the deps array with all the variables used inside useEffect.
And of course you will spend a lot of time after, to debug this crap and make it called only when you need by covering your functionality in "if" statement, which often becomes huge.
So not you are controlling the useEffect,
useEffect is controlling you.
Such a mess.
Anyone else overwhelmed with React this and React that, everywhere? There are a lot of other powerful JS projects. I wish React would just go away at this point.
It's not THAT bad. Mixing projects together is my worst nightmare.
I am so tired of React's experimental things! Like infinite non-stable things appeared last 6 months. They solved none of them!
Please make video on redux-saga and reapex
This is why React sux. It's been this long and they still haven't solved this.
I get the opposite impression, it's never been a problem
React looks like it is in crisis
bro your head needs gimble
useEffect made me hate react
Your face is bigger now? it's slightly confusing.
React is hacky, I'm going back to Vue. They seem to have Nuxt 3 sorted now. Back to react if Vue breaks again
React js is a blasphemy for JavaScript community. React nonsense must be banned across world plane. This f library makes web development unnecessarily complicated.
Angular is far better than svelte and react nonsense., because it leverages rxjs subscription, angular service make communication between sibling components much easier, developers know what exactly is happening.
Svelte and react have confusing code. Developer experience matters.
With its ugly html DSL? C'mon man.
Thanks
Thank you for the support!