I'll be honest I found this pretty hard to follow. Between the line numbers being really weird (Hard to tell if everything being shown is just one file or some extension combining multiple files??), the enlarged text not allowing a lot of the code to be seen at one time, and re-writing the component in the same file (I think?), I found myself trying to keep up on things going on in the editor window rather than the actual lesson of the video itself.
Do the useCallback/useMemo optimisations have any value in this case? It seems like any time the parent of Toggle rerenders then the whole Toggle subtree will be rerendered anyway by virtue of the fact they are non-memoized functional components
Awesome video Kent. Thanks a bunch🙌🙌 I think react guarantees that the state setter never changes. So that useCallback was not requited I guess. Even if the setter did change, that `on` dependency was not required since here an updater function is used to toggle state.
Nice video, I was looking into something like this to consume another component without losing composition. I dont know if this is the best way but will certainly try.
Great video. I'm wondering why props.onToggle wasn't added as a dependency in the useEffectAfterMount? And why toggle wasn't added as a dependency to useMemo. I see for this case it was just a setState call, but normally if it contained more complex logic, it would've had to been added as a dep right?
This is lookin' pretty good. I was hoping someone else was also talking about compound components with w/ context or children-first design patterns other than me. Nice to see this. I know it's old, but I wasn't aware of this style of component development until about a year after this video and haven't seen anyone else doing it anywhere I've worked.
Great video as always! Would it be a bad idea to add side effects to the `setOn` callback? i.e. const toggle = useCallback(() => setOn(oldOn => { const newOn = !oldOn props.onToggle(newOn) return newOn }), []) That way the whole `useEffectAfterMount` wouldn't be necessary.
If you do that, the timing might be incorrect. The onToggle callback would be called even before the state is actually set to the new value, which would also delay rendering.
He says in the video that useEffect is a better place because whatever you do in useEffect will be executed so that it will be non-blocking. Edit: 21:00
Great video Kent! Thanks for sharing this with the community! I have a question about the performance stuff you have shown (useCallback, useMemo) in the video. When using these hooks to prevent unnecessary rendering, is that necessary to use the memo function that React provides? reactjs.org/docs/react-api.html#reactmemo Thanks again and take care!
I'm taking your workshops, and tbh I never learned this much like I did taking your workshops.. they're pretty awesome ❤ I just finished the compound components pattern, and I love it! I tried to recreate a simplified version of reach ui Taps component and it works, and that made me feel so happy 😅
My favorite thing about your workshops is that I actually build stuff before I watch your great explanation and opinions, not to forget the emojis haha.. I love them
I'll be honest I found this pretty hard to follow. Between the line numbers being really weird (Hard to tell if everything being shown is just one file or some extension combining multiple files??), the enlarged text not allowing a lot of the code to be seen at one time, and re-writing the component in the same file (I think?), I found myself trying to keep up on things going on in the editor window rather than the actual lesson of the video itself.
Is there an updated codesandbox? The current codesanbox link is broken. Getting /src/exercises-final/01.js: hasn't been transpiled yet. error
Great vìdeo!!! by the way, What name of way to write the component "Toggle.On", everybody?
It doesn't really have a name as a pattern, but "On" is technically called a "static property" of the "Toggle" function
It's always fun and good learning experience watching your videos.. Thankyou so much Kent.
Do the useCallback/useMemo optimisations have any value in this case? It seems like any time the parent of Toggle rerenders then the whole Toggle subtree will be rerendered anyway by virtue of the fact they are non-memoized functional components
Awesome video Kent. Thanks a bunch🙌🙌
I think react guarantees that the state setter never changes. So that useCallback was not requited I guess. Even if the setter did change, that `on` dependency was not required since here an updater function is used to toggle state.
Nice video, I was looking into something like this to consume another component without losing composition. I dont know if this is the best way but will certainly try.
Great video. I'm wondering why props.onToggle wasn't added as a dependency in the useEffectAfterMount? And why toggle wasn't added as a dependency to useMemo. I see for this case it was just a setState call, but normally if it contained more complex logic, it would've had to been added as a dep right?
This is lookin' pretty good. I was hoping someone else was also talking about compound components with w/ context or children-first design patterns other than me. Nice to see this. I know it's old, but I wasn't aware of this style of component development until about a year after this video and haven't seen anyone else doing it anywhere I've worked.
Thank u for tutorial.
I've got a problem with TS.
Could you make a video about creating Functional Compound Component with TS?
thank u for this awesome video
Great video as always!
Would it be a bad idea to add side effects to the `setOn` callback? i.e.
const toggle = useCallback(() => setOn(oldOn => {
const newOn = !oldOn
props.onToggle(newOn)
return newOn
}), [])
That way the whole `useEffectAfterMount` wouldn't be necessary.
If you do that, the timing might be incorrect. The onToggle callback would be called even before the state is actually set to the new value, which would also delay rendering.
He says in the video that useEffect is a better place because whatever you do in useEffect will be executed so that it will be non-blocking. Edit: 21:00
@@JOKINIEMI187 Thank you, I must have missed that haha
Great as always. Really useful about useEffect and closure thing. I think it would be great to have more content on this stuff.
I was into your rant at the end but then you decided to nip it!
Great video Kent! Thanks for sharing this with the community! I have a question about the performance stuff you have shown (useCallback, useMemo) in the video. When using these hooks to prevent unnecessary rendering, is that necessary to use the memo function that React provides? reactjs.org/docs/react-api.html#reactmemo
Thanks again and take care!
Not necessarily. Maybe this will help: kcd.im/usememo
I'm taking your workshops, and tbh I never learned this much like I did taking your workshops.. they're pretty awesome ❤
I just finished the compound components pattern, and I love it!
I tried to recreate a simplified version of reach ui Taps component and it works, and that made me feel so happy 😅
I'll mention you on Twitter today to show you the code
My favorite thing about your workshops is that I actually build stuff before I watch your great explanation and opinions, not to forget the emojis haha.. I love them
I'm thrilled you're learning and enjoying it!
Great video, helped to clear a few concepts around hooks.
great explanation of using hooks
1080p?