You're Doing React Hooks Wrong, Probably
ฝัง
- เผยแพร่เมื่อ 10 ก.ค. 2024
- Let's see how to get the most our of React hooks by using them as a reactive state management system by making proper use of the dependency arrays with useEffect, useMemo and useCallback.
Github: github.com/jherr/reactive-pok...
Codesandbox: ttps://codesandbox.io/s/github/jherr/reactive-pokemon/tree/main/?file=/src/App.tsx
Completed code: github.com/jherr/reactive-pok...
Spreadsheet: docs.google.com/spreadsheets/...
Kent C. Dobbs Article: kentcdodds.com/blog/usememo-a...
00:00 Introduction
02:20 Project setup
03:45 Getting the data
05:18 Creating derived data the wrong way
08:03 Tracking re-renders
09:05 How React.memo works
10:24 Using useMemo
11:55 Dependency graphs in React
14:54 Adding search
17:03 Diagramming the data flow
19:05 Tips for getting it right
19:58 Outroduction
If you liked this video, buy me a coffee! www.buymeacoffee.com/bluecoll...
Typescript Playground: www.typescriptlang.org/play
Types vs Interfaces:
* blog.logrocket.com/types-vs-i...
* www.typescriptlang.org/docs/h...
👉 What's my theme? Night Wolf [dark blue]
👉 What's that font? MonoLisa
👉 Jack is also on the React Round Up podcast: devchat.tv/podcasts/react-rou...
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
💢 Watch our other videos:
💟 Hacking your Github contribution graph: • Hacking Your Github Co...
💟 More Typescript videos: • JavaScript to TypeScri...
Thank you for watching this video, click the "SUBSCRIBE" button to stay connected with this channel.
#typescript #react #reactive - วิทยาศาสตร์และเทคโนโลยี
![[TH] Esports World Cup : Knockout Stage Day 1](http://i.ytimg.com/vi/ES-vr-FarFg/mqdefault.jpg)
I remember writing a filter table function with hooks , and suddenly something just clicked.
I really appreciate that you're using Typescript primarily in tutorials
Except Ben Awad & you I never saw anyone using Typescript primarily in tutorials
you may seen often if watching Angular tutorial :D
I love you Jack and what you're doing for the community, you're my inspiration
Same. A terrific teacher ☘️
indeed he rise the bar
100%
Man your explanations are so clear. Well done. Wish I had this kind of tuition when I was starting learning JS and React.
All the explanations are so tight, seeing the dependency diagram helped a lot! You're the only person I've seen on youtube that can explain things so well in a practical way while showing the technical aspect of it. Thank you so much for the content
Thanks you Jack , that was very informative, hope to see you diving more into the advanced topics in React.
Hey man. I love your channel so much!
Like it is so hard finding a channel that dives more into the complex topics...
You're absolutely stellar for more advanced info, especially since I'm now at Intermediate level :D
Big
It's so worth it to take the effort and time to watch and review ALL of Jack's videos. It really shows how much time and thought he puts into giving his knowledge to the community for FREE. Thank you for all you do Jack!
Your videos is on another level comparing to other TH-cam channels. Thanks for the efforts
Thank you Jack for all of your high quality, in depth content. I'm so glad that i stumbled across your channel. You are explaining the concepts of React in a more detailed manner, which are often necessary when someone really wants to get a job as a React developer. Most React / programming channels on youtube only show the surface of some concepts. You explain more in depth, and in a way that it is really easy to understand. Your channel is truly underrated, I hope more people will find your channel.
No matter how much experience one has, every time you would learn something new. Awesome explanation. Thank you so much.
I come from a vue background and it was just so clear when you compared useMemo to computed values. Thank you!
So glad to have found this channel, great content!
Without exaggeration you are one of the most interesting people I've ever seen on the Internet..., the way you teach makes me cry lol! I wish our world had MANY teachers like you 👌
Thanks for the great video Jack! Your content is gold!
nice as usual we are happy we have you as our senior
You’re legendary. I watched almost all your videos. Thank you very much for the amazing content, keep it up 🥇🏆
Now, it feels, i was always using the hooks in a very much wrong way. Thanks to Uncle Jack for teaching us the right way:) Loved it, awesome
If you take a look at his code you'll see that he truly is a senior dev
This is amazing content! Your examples are top notch
Thank you very much Jack for this very informative and clear video.
man the border radius on your webcam is given me old school CSS vibes
amazing content and presentation
Mr Herrington, I know you probably get this all the time, but you rock!! This was really elegant!!
Love you, I think I am gonna watch all your react videos 😅
Thanks Jack! Awesome content as always
Amazing display,
The touch of proficiency is the diagram at the end of the video, no bs as usual!
I'm learning so much from you thanks alot!!
Thanks for the great extension for diagramms)
Most excellent video.. highly valuable.. thank u so much
I just had to subscribe after this Video. Awesome content keep it up!
Thanks!
Where is the love reaction button yt?? I need it because like this video isnt enough! Awesome work Jack!
I just missed you commenting that in some scenarios it's interesting to separate each atomic intention (use-cases) of the user into separate hooks (and how useful this can be for large systems in terms of testing and reuse) eg useGetPokemons(filter ), useCalcPokemonMinPower(pokemons), useCalcPokemonMaxPower(pokemons), useCountPokemonWithPower(pokemons, threshold) and so on
Another great tutorial.
Your video quality has improved a lot, if possible can you do a video on recording or creating tutorials, and the setup that you are using currently.
Thanks. I appreciate that. That's really cool that you think it's good enough to do a video on. I'll definitely think about it.
You are a champion Jack! , Thank you
wow you are good. Always a couple steps over the average explanation.
brilliant demonstration
Happy birthday Jack!
Thanks!
I have never had anyone explain all of the React intricacies so well.
amazing explanation, thank you!
awesome work!
Really good stuff!
You are awesome, thanks a lot!
Coming from Vue, I was watching and thinking "this is just like a computed property" and then you said that was just like it. I honestly was "afraid" of using useMemo when even the docs say to not use it often. But in your example, it does not only make sense, but I agree that having that list of dependencies makes clear that to "compute" this value depends on those other values.
What a fantastic resource!
Thank you, this was very informative. It was a bit hard for me to follow because of having two components in one file. Just a recommendation to consider separating out the components into their own files. Thanks!
Thanks for the feedback!
Thanks for the great video
Thank you very much Jack
great content :D
useMemo and useCallback definitely have their place, but writing code like this you start feeling like you need them everywhere. It's a lot of boilerplate. It's can be worth taking a step back before you reach for them.
1. You could have achieved the same effect by instead separating the threshold input and count into a child component.
2. You get no value from memoizing onChange listeners if you are passing them straight to inputs anyway.
Just a small correction in the description: It's Kent C. Dodds, not Dobbs. Other than that awesome content, I learned a ton, from both of you! :)
Whoops, my bad.
Really awesome 👌👏
really good example 👍
Congratulate me) I finally found what I was looking for
Great content, I'm really thankful for all the work you put in your tutorials !! stupid question, i m writing it mid vid, I m still wrapping my head around the useMemo hook etc and i ve been thinking, if it so necessary, why is it not the default for state ? Sorry for my english.
If you give me a time reference I'll give you my reasoning about useMemo.
Love to see a demo on dependency injection with react context And react ui architecture patterns
Great content, thanks. It rather reinforced my feeling that I use hooks correctly than showed me something I didn't know, but still a good watch. Btw, why haven't you simply computed min and max within a single useMemo call, returning an object rather than a integer twice?
Probably could have, yeah.
Nice! Thanks!
Ah that comparison with Vue's 'computed' mechanism really cleared up a lot for me - thanks!
I adore the diagram! Is this an extension or an OOTB feature? Thanks for the explanation about hooks, it was enlightening!
OOTB feature. It's always been there.
Nice, thanks
Awesome!
Ur home looks amazing
Thanks!
Thanks for the great content! Btw: what keyboard are u using?
A Varmilo VA87M my daughter got me for my birthday.
Thank you.
Where are you from? That background in the beginning looks beautiful.
Thanks for this video
Oregon. Although this is Lacamas Park in Camas, WA.
React hook form might be an interesting idea for a new video 😉
I've done a couple previously on React hook form. I might add it to a speed run though. It's a great library.
There should be a separate comment section for all the praise and appreciation ;)
I was scrolling through in hope to find someone disagree with you on this one - simply out of interest in other points of view, not saying I'm not buying your arguments, but when there are 2 programmers there are 11 solutions (
The legendary Bill Joy once told me that the fundamental flaw of the "management" panacea of adding new programmers to a team that is behind schedule is that the rate of new code generation per developer expands linearly while the rate of new idea generation per developer expands exponentially. Since overall team productivity is the ratio of the former to the latter, team productivity asymptotically approaches zero as developers are added.
You're really smart and stuff.
I love the pop culture references 😃
Just my two cents: the obvious quality of your videos will hopefully carry your TH-cam channel forward enough that you don't need to rely on crummy, clickbaity 'You're doing x WRONG' titles to draw people in. Imposter syndrome and gatekeeping are so common in our neck of the woods and I feel a title like this only adds (a drop of) fuel to that fire.
Other than that, thanks so much for all your work, from which I have learned a ton!
i really appreciate what you are saying, and I've put a ton of thought into this. My original idea for this channel was "compelling content, outside the paywall on TH-cam, for anyone". I've done some behind the paywall stuff and I don't like it. I think anyone should be able to teach themselves to code by using videos and do it for free. But the big publishers have an audience, and out of the box on TH-cam, I haven't had one.
So I started doing almost exactly what I'd do for Packt or O'Reilly. Professional titles, business style thumbnails, etc. I didn't want to "sell out" to the TH-cam algorithm. And the result is that this channel has grown relatively slowly in comparison to my contemporaries. e.g. Florin Pop started YouTubing a year after me and has 5+X more subs. And we cover very similar topics.
Problem is that my click thru rate (CTR) is low. I've got content people like to watch when they get to it, but they don't because either the thumbnail or the title isn't compelling. I've done a lot more on the thumbnails lately and it was improving, but not by much. This video however, with its clickbait title, has done 10X the views, 2X the view time, 3X the CTR and gotten me a bunch of new subs over last weeks release.
Here is how I look at myself on the mirror on this; I'm NOT lying with this title. People are doing react hooks wrong _probably_ in that most of the folks I get comments from or interview don't know how to use dependency arrays. So, for those folks, they are using them wrong and this gives them an entry point into learning how to get more out of them and demystify them a little. And for folks already using them that way, then it's something they can point to and get some self-confidence.
Anyway, unseen content helps nobody, is my long winded point. So it's either keep it free and give a little on my TH-cam "purity" or go behind the paywall and pick up the their audiences and but also play to their editors fiddle.
@@jherr Many thanks for taking the time to shed some light on this stuff. Hope I didn't come off too harsh. I understand you gotta do what you gotta do to make your channel flourish, and it couldn't be more well deserved!
@@thatboyneedstherapy Thanks man. And feel free to keep keepin' me honest. :)
"Imposter syndrome and gatekeeping are so common in our neck of the woods" - just admit it, you *were* using React hooks wrong before this video!
( /jk fergedsakes! )
Fantastic video as usual. Thanks Jack!
Lil question: Why did you end up wrapping onSetThreshold w/ useCallback? Looks like it is not being passed into a memoed child component, It also does not look like an expensive function.
Thanks
I probably didn't have to. When it comes to useCallback expensive doesn't matter. That's just about useMemo and it's one of two reasons to use useMemo; maintaining referential identities and, as you point out, expensive synchronous computes.
@@jherr Got it! Thank you so much for the clear explanation.
Jack, you're the fucking man, thank you
Jack is the Lead Senior anyone wish to have. But anyone can have a bit watching his video
seems like you are in love with Pokemon hahahah
Hey Jack thanks for the video. Can you share which font and theme you're using in your vscode.
Waiting for reply.
It's always in the description of the video.
14:45
min max could have also been achieved with useCallback(type: 'min' | 'max') and Math[type](...) , reducing the code duplication a little, I think ;)
unless this would memoize only the callback, not what it returns, in which case we'd have to use useMemo anyway, which would not be the optimisation we wanted
welp, sometimes over-optimisation hurts the performance, when you don't know what you're doing, which proves the point of this video :D
Great video Jack as always. 👍
What vscode theme is that?
Night Wolf [dark blue] with MonoLisa
@@jherr nice, thanks 🙏
Thanos joke was awesome
thanks
Dependency graph, actually is topological sort in data structure context, or something similar.
Fair. In this case I was looking for a term that captured the dependencies between the various pieces of state, derived state and effects.
Can you make a video about your VS code add ons and code formatting? I really need to step up my game after seeing u code!!
Great tutorial. One question is now I've learned about making forms with useRef to prevent rerenders, I like how clean and simple the code is vs storing state in useState. What do you think?
Uncontrolled inputs are fine. Preferred in a lot of situations. Forms managers like react-hook-form primarily use uncontrolled inputs.
Great video Jack! Question - Is it ok to disable my linter when I want to have an empty useEffect dependency array? It will usually tell me I need to have something inside or remove it entirely.
You should never ever have an empty dependency array. And no, you should not disable the linter, it is almost always correct.
@@jherr Thanks Jack!
I think I was afraid to overuse the hooks like this before seeing this. So many articles say to not abuse useMemo because it leads to performance issues, but judging by your examples, it seems like the opposite is true. Basically cache everything, or wrap everything that changes.
These tutorials are great but tutorials that explains logics might be even better, for example:
I had a hard time implementing a data fetch on scroll app on how to do that from both frontend and backend.
Same with tables that have indexing at the bottom, on how to fetch data on indexing change (again from frontend and backend).
react-use has some excellent hooks to track scrolling, and you can use the data from those as dependencies on useEffects to fetch more data. Same thing with a page index. If the page index is a dependency of the fetch useEffect then the fetch will fire every time the page changes to go and get the data for that page.
@@jherr Thanks for the advice, backend was also a challenge (in some way)
great video, thnx - just a small typo: it's Kent C Dodds, not Dobbs; or maybe it's a joke I don't get...
Hey, thanks for sharing :-)
I am not sure when you have a dependency you can use the use effect with his dependency array also, so when you need to use useEffect and when use Memo?
BTW I didn't really understand what use Callback give us here because you show it without any dependency.
Can you give an example please :-)
useEffect is "watch these values". useMemo is "compute this value from these values". and useCallback is the same thing but applied to functions. For custom hooks I would always use useMemo and useCallback because I don't know how the data and functions I return from the custom hook will be used. For component code, useCallback is optional, but I still recommend it if you are sending the callback to another component so that it retains referential integrity.
useCallback holds a function that needs to run when given dependency changes
in this case, we wanted to fire it only with event.target and we didn't need useCallback's context to watch for updates from that dependent variable
if we included "pokemon" variable somewhere in that "onSetSearch", it means we want useCallback to know about "pokemon" too
i hope this makes sense ;)
@@jherr I think the conclusion need to be: do you want to make react to be Reactive? You need to use: useEffect, use Memo and use Callback :-)
Great tutorial sir, I have a question whats the name of the extension for auto suggestions you're using.
That would be Github Copilot. Don't believe the FUD, it's not going to take your job. But it is going to accelerate your coding like I've never seen before.
@@jherr I've signed for it couple weeks ago but i thought ur using something else haha. thanks for the quick response btw🙏
Hi Jack, interested to see if you have any thoughts on the new SolidJS library.
I have much much much love for SolidJS. This video me gearing up to show how SolidJS gets reactive state very right.
@@jherr Awesome, looking forward to it!. I've been looking at it's docs last weekend and it feels really well thought out.
@@jujijiju6929 Not only well thought out but blazingly fast. I wrote a search page for my BCC videos in it and it's insanely fast.
Hi Jack, I've not seen this line of code used before "const [pokemon, setPokemon] = useState([]);". I mean, I understand and have used the useState part but specifically not the part in that position. Is that a Typescript thing?
Yeah. That’s typescript. You have to define what will go into the array. If you start with an empty array there is no way for it to know what you will be putting into it and making sure you always put the right kind of stuff.
@@jherr Thanks for confirming Jack. I've not used or read Typescript as yet. Trying to focus (reduce my learning curve) on learning JavaScript, React & Next.
@@simonedwards7101 I'm in the same boat. After more than two years of pretty much full-time React and NodeJS coding, I'm still struggling with basic syntax and "shortcuts" (such as the gazillion varieties of expressing an arrow function). I fully intend to use Typescript when I feel more confident of my understanding of the underlying Javascript that it relies on.
Nice
I already know this ones gonna hurt me
That was so fucking awesome 🤤
For search is there a reason why you chose to refetch the data and do a filter rather than just filter the array that you already have locally? I guess refetching guarantees the latest data (which wouldnt help in this case) but on an onChange that seems like too many fetches imo.
Thanks for the awesome video! Cheers!
The example is more about how to manage control flow. But in reality, yeah, it's a small dataset and in this case fetch is just going to returned the cached data anyway. I'd probably also add in some debounce tho. :)
Thanks for replying! That makes sense and I didn't know debounce was a thing tysm!
sorry jack what's the reason you usememo in min max too? when it's enough on pokemonWithPower to memoized the table?
They are derived values. So the component can get re-rendered as many times as we want, but the min/max won't get re-computed unless the underlying data changes.
@@jherr i think useMemo should be used when we really wanna pass the value to other component? Since using useMemo uses memory and too many useMemo usage will eventually result a bad performance caused by first read-time to decide whether value will be memoized or not.
I've seen a lot of apps using too many useMemo and instead resulting a slower app.
or perhaps jack do u have any idea when it's the best time to stop useMemo? rather than memoized everything?
@@dellryuzi I haven't seen useMemo slow down an app. Comparing two arrays of scalars is a quick operation, and nobody is suggesting an app with useEffects is slower, and the dependency logic is the same between useMemo, useEffect and useCallback. If you're calculating an object or an array you should use useMemo because those are references, and if you do pass them somewhere to another component, or use that reference in a dependency array, you'll want it to managed by useMemo. If you are creating a scalar from useMemo then it's really a question of how long the scalar takes to calculate. If it's a simple expression then you probably shouldn't use useMemo, if it's the result of some iteration or a reduce, then you should probably use useMemo, otherwise not.
Hello jack , could you please tell us , which extension use for diagram plotting in vs code
Diagram.io
Holy sheet
Great content!
Can someone explain the need for useCallback? I couldn't get it.
Thanks!
Heh -- I rely on the linter to tell me when I need useCallback. My perhaps naive understanding is that useCallback is the mechanism to break infinite loops in the rendering/useEffect code. As the linter explains, a function that is needed only by one specific useEffect hook can often be refactored into a local function within the hook -- eliminating the need for useCallback. Your mileage may vary. :)
By the way, what is that diagram extension that you're using?
There are a bunch, but the particular one I used was marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio I prefer the look of Excalidraw - excalidraw.com/ - but having the arrows snapping feature made it easier in this case.
@@jherr Thanks!
What plug-in are you using for diagrams in VS code?
Cool, right? marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio
@@jherr Very cool!
Amazing