this will be a nightmare to spot during code reviews and when onboarding on a project. When you read just the useEffect codebase, you don't know if the methods you are using in there are normal callbacks, new useEffectEvents or functions from outside the scope of react. I often use a ref to keep the function that I want to call in it, and run the ref.current inside the useEffect. I name the function something like logCallbackRef, and every time I read the the code, I see the method name ending in 'Ref' and I can infer the origin of that entity.
Hmm... 🤔 I'd argue that you don't really need to know where the function is coming from as long as you let the linter do its job in terms of telling you which variables you should include in the deps array.
Good video. You laid out a problem, explained why other solutions don’t work, and then explained why the new solution is better. Regarding the hook itself: for me personally this is a complex solution to a simple problem. I just don’t use the dependency array lint rule. Obviously that isn’t a good solution for everyone (especially is you have a lot of team members) but I think once you understand react enough you don’t need that rule to keep you honest. It ends up causing more problems than it saves haha
Thank you! I don't think it's ever a good idea to suppress the linter, it can lead to some unexpected nasty errors. Feel free to read this section from the new React docs where they explain it: beta.reactjs.org/learn/separating-events-from-effects#is-it-okay-to-suppress-the-dependency-linter-instead
If I use useEventEffect on a function, can I also use it in a normal click handler for example? So use it in a useEffect AND in a handler at the same time?
No, that's not possible, you can only call them from within useEffect. You can read more here: beta.reactjs.org/learn/separating-events-from-effects#limitations-of-effect-events (Earlier on, there was an RFC for a more generic useEvent hook which you could use for click handlers etc, but it didn't go through and turned into useEffectEvent.)
Great explanation, first time watching you but i liked it. Also didn't know about useeventeffect
Thank you, glad it was helpful and you liked it. If you have any other feedback on the video, feel free to let me know, I'm always trying to improve!
this will be a nightmare to spot during code reviews and when onboarding on a project. When you read just the useEffect codebase, you don't know if the methods you are using in there are normal callbacks, new useEffectEvents or functions from outside the scope of react.
I often use a ref to keep the function that I want to call in it, and run the ref.current inside the useEffect. I name the function something like logCallbackRef, and every time I read the the code, I see the method name ending in 'Ref' and I can infer the origin of that entity.
Hmm... 🤔 I'd argue that you don't really need to know where the function is coming from as long as you let the linter do its job in terms of telling you which variables you should include in the deps array.
@@tom_dohnal for deps array yes I agree. I meant for reasoning about the code as a human and building a map of the code in your mind
Good video. I hope react brings that soon
Thank you, and so do I! 😆
Good video. You laid out a problem, explained why other solutions don’t work, and then explained why the new solution is better.
Regarding the hook itself: for me personally this is a complex solution to a simple problem. I just don’t use the dependency array lint rule. Obviously that isn’t a good solution for everyone (especially is you have a lot of team members) but I think once you understand react enough you don’t need that rule to keep you honest. It ends up causing more problems than it saves haha
Thank you!
I don't think it's ever a good idea to suppress the linter, it can lead to some unexpected nasty errors.
Feel free to read this section from the new React docs where they explain it: beta.reactjs.org/learn/separating-events-from-effects#is-it-okay-to-suppress-the-dependency-linter-instead
If I use useEventEffect on a function, can I also use it in a normal click handler for example? So use it in a useEffect AND in a handler at the same time?
No, that's not possible, you can only call them from within useEffect. You can read more here: beta.reactjs.org/learn/separating-events-from-effects#limitations-of-effect-events
(Earlier on, there was an RFC for a more generic useEvent hook which you could use for click handlers etc, but it didn't go through and turned into useEffectEvent.)
maybe not use react tbh
react is pain
Maybe not watch video about React if you don't like it?