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
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%
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.
Man your explanations are so clear. Well done. Wish I had this kind of tuition when I was starting learning JS and React.
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!
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.
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
Your videos is on another level comparing to other KZhead channels. Thanks for the efforts
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!
nice as usual we are happy we have you as our senior
So glad to have found this channel, great content!
Thanks for the great video Jack! Your content is gold!
This is amazing content! Your examples are top notch
If you take a look at his code you'll see that he truly is a senior dev
You’re legendary. I watched almost all your videos. Thank you very much for the amazing content, keep it up 🥇🏆
Thank you very much Jack for this very informative and clear video.
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
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 Jack! Awesome content as always
wow you are good. Always a couple steps over the average explanation.
man the border radius on your webcam is given me old school CSS vibes amazing content and presentation
Amazing display, The touch of proficiency is the diagram at the end of the video, no bs as usual!
Love you, I think I am gonna watch all your react videos 😅
Mr Herrington, I know you probably get this all the time, but you rock!! This was really elegant!!
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
I'm learning so much from you thanks alot!!
Thanks for the great extension for diagramms)
brilliant demonstration
You are a champion Jack! , Thank you
amazing explanation, thank you!
Most excellent video.. highly valuable.. thank u so much
Really good stuff!
awesome work!
I have never had anyone explain all of the React intricacies so well.
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.
What a fantastic resource!
Thank you very much Jack
I just had to subscribe after this Video. Awesome content keep it up!
Thanks!
Thanks for the great video
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 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.
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!
really good example 👍
Love to see a demo on dependency injection with react context And react ui architecture patterns
Happy birthday Jack!
Thanks!
Really awesome 👌👏
Nice! Thanks!
great content :D
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.
Ur home looks amazing
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.
Thanks!
Thank you.
Nice, thanks
Awesome!
Congratulate me) I finally found what I was looking for
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.
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.
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!!
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.
Just my two cents: the obvious quality of your videos will hopefully carry your KZhead 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 KZhead, 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 KZhead, 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 KZhead 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 KZhead "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! )
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.
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.
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.
thanks
You're really smart and stuff.
Thanks for the great content! Btw: what keyboard are u using?
A Varmilo VA87M my daughter got me for my birthday.
Where are you from? That background in the beginning looks beautiful. Thanks for this video
Oregon. Although this is Lacamas Park in Camas, WA.
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 Jack as always. 👍 What vscode theme is that?
Night Wolf [dark blue] with MonoLisa
@@jherr nice, thanks 🙏
Jack is the Lead Senior anyone wish to have. But anyone can have a bit watching his video
I love the pop culture references 😃
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
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.
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.
Thanos joke was awesome
Nice
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🙏
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.
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. :)
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 :-)
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.
Jack, you're the fucking man, thank you
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!
Holy sheet
seems like you are in love with Pokemon hahahah
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!
I already know this ones gonna hurt me
great video, thnx - just a small typo: it's Kent C Dodds, not Dobbs; or maybe it's a joke I don't get...
i wonder what that vscode autosuggestions extension is. in 3:58
haha, I know it as i watching the video. copilot
Yep, it's copilot. Expect a video on that fairly soon.
What intellisense did you use around 3:54 I'm totally mind blown
That's Github Copilot.
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.
Hello jack , could you please tell us , which extension use for diagram plotting in vs code
Diagram.io
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.
Can someone explain the calculatePower function at 3:18 what are all of the + signs doing?
They're adding all the numbers in each variable together to get the total.