I’ve read some articles about using useCallback and useMemo on non expensive functions only decreases performance because you load more into memory then actually needed. I.e. not “optimizing” would have led to better performance. Do you agree with this?
Yes, I mentioned in the video that useCallback and useMemo weren't necessary in this particular example. I used them here because I'm teaching them and I didn't want a massive unwieldy example. IMHO, the perf penalty on useCallback and useMemo isn't huge, but... I would only use then if I'm writing a custom hook, or I'm passing their results down to a tree of components where I don't know how they will be consumed, and that's because of referential integrity. Ken C. Dobbs has a great article on this and the conclusion is that it's primarily about referential integrity.
@@jherr Thanks for the feedback! I find it very hard to know when or when not to use these kinds of optimizations as a beginner. Definitely going to look up that article.
@@xq_nemesis For beginners I would start by always using them. That will give you some serious experience with hooks and make the transition into building your own custom hooks a lot easier. You can always pull them out for perf reasons. Start with the idea that everything from the top of the function to the return should be in a hook, and then come back from that if you get pushback.
@@jherr Sorry to butt in here but when you say, "start with the idea that everything from the top of the function to the return should be in a hook", what are you referring to? I ask because I'm dying to take my mess of code and abstract the logic from the presentation. I just don't have the correct mental model for how to approach custom hooks at this point. Your channel is the best on RU-vid btw and I'm not just saying that!
@@mattmarkus4868 Thank you! Feel free to jump on the Discord server and we can talk through any specific example you might have. As with all this stuff it's pretty subjective. If you are doing the "hooks as a store" thing then yeah, I'd pull that out into a custom hook. If the code is very specific to this one component, and would never be reused, then I might think about leaving it be, unless it's too big, and then possibly refactoring it into a custom hook in the same file. One of the reasons I think doing more custom hooks is important is because you start learning the rules of dependency arrays and referential integrity and getting a good feel for when to use useCallback and useMemo.
Hey, im from Brazil. Thanks for making these videos. I improve my code in React significantly every time i watch your tips. Thanks a lot ! Great work !
Awesome content Jack! So much learning condensed to 15-20 minutes. I would love to watch a video on some complex use cases of `useEffect`. For eg. 1. calling an API on on initial render -> saving that in state -> based on some interaction call the API again -> update state. 2. how many `useEffects` are too many? 3. Shortcomings of `useEffect` (where you need to end up using additional libraries like `react-use`). Thank you again for making fun videos
Thanks Jack! I don't ever use useCallback or useMemo. This video helped me to understand them better. As far as rules go: I tend to always pass a function when setting the value of useState just feels right for me.
Hey Jack, recently discovered your channel. I have started a new front end project involving TS, React, Chakra UI and MobX. The content you're making at the moment is so relevant to me!!! Finding it really helpful. Keep up the good stuff, thanks
Hey Jack, awesome vid as always! Could you perhaps raise the zoom level of the code so it's a little easier to read on touch devices? Would be great if you could :)
When I get discouraged about my skills learning React I can think back to learning guitar and bass. My fingertips hurt, I had to practice a lot for very little result. Eventually with a lot of hard work I was able to start playing some of the riffs and solos I so admired.
Thanks for the video! How about a video showing how to use the react profiler chrome extension? In this video, you can show how useCallback and React.Memo are used to avoid unnecessarily renders
Nicely done! I was admittedly hoping you were going to touch on the pitfall of using objects and functions as dependencies. Many people run into that not realizing that objects change even if they are equivocally the same.
I'll get there, I had to lay the groundwork first. I had enough people coming to me with the basics stuff that I had to cover that first and I didn't want to overwhelm with a ton on content.
Great video, it put these hooks in a little bit different perspective. It was nice starting from a broken app, and then break it again. Good to see the moving parts. Subscribe and bell button pressed :D
Great video, just a heads up, you might want to increase the bit rate of the video, or maybe decrease the resolution of your face cam when showing the parts in VS code. That should fix the weird blocky background effect showing on your VS code background!
Hi Jack, great video thanks and greetings from Buenos Aires. Should I use useMemo and useCallback whenever I can? In which cases I wouldn't have to use them? Thanks a lot !
IMHO, if you are building custom hooks you should use them. You should also use them if the function, or the data, that's being created, is passed to another component or being used in a dependency array. It's all about maintaining referential identity. When the data changes, the reference should change, when the data does not change, the reference should not change. Also, references only matter for arrays, objects, or functions. So if you are using useMemo to create a primitive type (string, number, boolean) then you should only use that if computing the value is time intensive.
Hi Jack. Would you consider doing a tutorial on testing? Maybe talk about TDD and the best way to test hooks, maybe testing for Redux as well? Feels like most RU-vidrs and content creators shy away from this topic which is unfortunate because it's so important.
I agree and yep, I'll add it to the list. Sadly though, it's a long list. :( You can emphasize it by joining the Discord server and putting a request in #video-ideas.
I'll call you out on a common Mistake 😉: No .catch() clause error handling for the fetch!! I mean at least tack-on .catch(err => console.error(err)); 😇 Good stuff as always...
Addendum thought of only-my-preference 'not a big deal', I think it is more predictable to define a named function for doing the fetching within the useEffect, and then call that function by name. Also let's you comment it out when you're working on other things...
Thanks for the video, but I still use the hook useCallback when my function is used inside a dependency array of a useEffect hook, other than this, I don't see a big gain in using useCallback to always wrap my functions.
In this case it’s not necessary that’s true. But in cases where you pass a function as a prop or return a function from a custom hook it’s good to useCallbavk.
Yeah, if you need mounted state in another `useEffect` in the same area then you could do an `isMountedRef` with `useRef` where you have a `useEffect(() => { isMountedRef.current = true; return () => { isMountedRef.current = false; }}, []);` and use that to feed other `useEffects` so they don't have to track it as well.
Well, the rules that I try to live by... That's a good question, specially when it comes to refactoring components into smaller components. When and what to refactor?! Like with this component, you could start to create a button component for AddOne. But what do we give it, do we only give it the setter (setNumbers), so it can only function as a addOne button, or do we give it a onClick prop, so it can handle any kind of click event? But that wo don't refactor the evenhandler out of this component... And when is it time to introduce a state manager?
Rule #5 contradicts to the "useEffect" implementation here. I heard once Dan Abramov talking about how we shouldn't omit anything in our "useEffects"'s dependency array but I don't really see how this can be done every time :/
Hi Jack! Thank you for another great video. Just one question: how can we get rid of the annoying "missing dependencies" error that shows on the console at 14:20? I get those all the time!
Well, the fix there was to add `numbers` as a dependency or use the `setNumbers(oldNumbers => [...newNumbers])` state setter variant. I generally find that when this warning fires, it's for a good reason.
How come console.log("request finished") ever works? It should not since setNumbers(data) makes MyComponent re-render hence being trapped into an infinite loop that does not scope that console logging
Most of this video is about issues with the dependency arrays. And that doesn't change with React 18. The only thing that changes is the mount-unmount-remount behavior in development mode with strict mode enabled.
