You're Doing React Hooks Wrong, Probably

[@ArunShankartheRealOne]

I remember writing a filter table function with hooks , and suddenly something just clicked.

[@krtirtho]

I really appreciate that you're using Typescript primarily in tutorials Except Ben Awad & you I never saw anyone using Typescript primarily in tutorials

[@lutfiikbalmajid3128]

you may seen often if watching Angular tutorial :D

[@Deliverant]

I love you Jack and what you're doing for the community, you're my inspiration

[@noccer]

Same. A terrific teacher ☘️

[@andresserron8596]

indeed he rise the bar

[@alexcooper4845]

100%

[@diyaagubarah3328]

nice as usual we are happy we have you as our senior

[@igrb]

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

[@ayoubbani6762]

Happy birthday Jack!

[@jherr]

Thanks!

[@matthew1106]

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!

[@kleberluisaraujomottajunio4218]

Thanks!

[@dc33333]

wow you are good. Always a couple steps over the average explanation.

[@basharkhadra2929]

Your videos is on another level comparing to other KZbin channels. Thanks for the efforts

[@rubenverster250]

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

[@esmaeilmirzaee]

No matter how much experience one has, every time you would learn something new. Awesome explanation. Thank you so much.

[@tabliqatchi6696]

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 👌

[@onkelZweiback]

I just had to subscribe after this Video. Awesome content keep it up!

[@jherr]

Thanks!

[@AbdelhameedG]

Thanks you Jack , that was very informative, hope to see you diving more into the advanced topics in React.

[@eXmatic]

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.

[@liltripple_reid8917]

If you take a look at his code you'll see that he truly is a senior dev

[@guilhermeprezzi7783]

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

[@nubl37]

man the border radius on your webcam is given me old school CSS vibes amazing content and presentation

[@johannsebastianbach3411]

Mr Herrington, I know you probably get this all the time, but you rock!! This was really elegant!!

[@JavierPortillo1]

I come from a vue background and it was just so clear when you compared useMemo to computed values. Thank you!

[@sasatatar]

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! :)

[@jherr]

Whoops, my bad.

[@TheL0rdOfTheStrings]

Man your explanations are so clear. Well done. Wish I had this kind of tuition when I was starting learning JS and React.

[@admxxi]

Thanks for the great content! Btw: what keyboard are u using?

[@jherr]

A Varmilo VA87M my daughter got me for my birthday.

[@JamesQQuick]

Really good stuff!

[@andresserron8596]

Amazing display, The touch of proficiency is the diagram at the end of the video, no bs as usual!

[@jr-hp7er]

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

[@cassioscabral]

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.

[@kumarnitesh60]

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.

[@jherr]

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.

[@PaulSebastianM]

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.

[@IctioPar]

So glad to have found this channel, great content!

[@jofla]

Where are you from? That background in the beginning looks beautiful. Thanks for this video

[@jherr]

Oregon. Although this is Lacamas Park in Camas, WA.

[@JustinProfaizer]

I have never had anyone explain all of the React intricacies so well.

[@SaifAlFalah]

Thanks for the great video Jack! Your content is gold!

[@fernard8985]

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?

[@jherr]

Probably could have, yeah.

[@lilibayo]

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

[@jherr]

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.

[@lilibayo]

@@jherr Got it! Thank you so much for the clear explanation.

[@Jmfufghf]

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?

[@jherr]

Uncontrolled inputs are fine. Preferred in a lot of situations. Forms managers like react-hook-form primarily use uncontrolled inputs.

[@AAquaticAApe]

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.

[@jherr]

You should never ever have an empty dependency array. And no, you should not disable the linter, it is almost always correct.

[@AAquaticAApe]

@@jherr Thanks Jack!

[@ghassanclassic7689]

You’re legendary. I watched almost all your videos. Thank you very much for the amazing content, keep it up 🥇🏆

[@simonedwards7101]

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?

[@jherr]

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.

[@simonedwards7101]

@@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.

[@thomasstambaugh5181]

@@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.

[@tiennsloit]

Love you, I think I am gonna watch all your react videos 😅

[@dellryuzi]

sorry jack what's the reason you usememo in min max too? when it's enough on pokemonWithPower to memoized the table?

[@jherr]

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.

[@dellryuzi]

@@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?

[@jherr]

@@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.

[@Larry-lv7dz]

Thanks Jack! Awesome content as always

[@leonewu7171]

i wonder what that vscode autosuggestions extension is. in 3:58

[@leonewu7171]

haha, I know it as i watching the video. copilot

[@jherr]

Yep, it's copilot. Expect a video on that fairly soon.

[@wfoster92]

This is amazing content! Your examples are top notch

[@TurboBorsuk]

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 (

[@thomasstambaugh5181]

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.

[@mudscuffer]

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.

[@ThEldeRS]

I adore the diagram! Is this an extension or an OOTB feature? Thanks for the explanation about hooks, it was enlightening!

[@jherr]

OOTB feature. It's always been there.

[@sandeepsoni7269]

Hey Jack thanks for the video. Can you share which font and theme you're using in your vscode. Waiting for reply.

[@jherr]

It's always in the description of the video.

[@jujijiju6929]

Hi Jack, interested to see if you have any thoughts on the new SolidJS library.

[@jherr]

I have much much much love for SolidJS. This video me gearing up to show how SolidJS gets reactive state very right.

[@jujijiju6929]

@@jherr Awesome, looking forward to it!. I've been looking at it's docs last weekend and it feels really well thought out.

[@jherr]

@@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.

[@erdemsoydan4117]

Hi ! from official docs -> "You may rely on useMemo as a performance optimization, not as a semantic guarantee. In the future, React may choose to “forget” some previously memoized values and recalculate them on next render, e.g. to free memory for offscreen components." QUESTION: As long as there is a statement like that about useMemo, i really wonder how do people (including you:)) encourage developers to use it?

[@jherr]

It manages referential identity, primarily. So if you are constructing arrays or objects, and those are passed to other components then, as of today, those will be referentially managed to not trigger downstream effects, memos, callbacks, or updates to memoized components.

[@erdemsoydan4117]

@@jherr Well.. Please check what I expose in my comment :) Epecially this part: -> "In the future, React may choose to “forget” some previously memoized values and recalculate them on next render" . >>>IN FUTURE REACT MAY CHOOSE TO FORGET

[@jherr]

@@erdemsoydan4117 First off they "may" do it, and they don't now. And then there is "choose", and I read that it that under some circumstances, most likely low memory, they may go into a mode where they will invalidate this simple first order cache. (BTW, it's important to understand that `useMemo` stores only the most recent value, not all possible outputs.) Because dependency arrays work on ===, and === works on value for strings, numbers and booleans, and references for objects, arrays, and functions, you have to have a mechanism to control references for complex object types for derived values, and those mechanisms are useCallback and useMemo. Without them you'd have to resort to pushing the derived data into mutable state, which is incorrectly modeling the relationship between mutable state, and data that we derive from that mutable state.

[@erdemsoydan4117]

@@jherr Thanks for your precious time. I have been working on mid scale app and we are using Context API (yeah not redux :)) . That scale and and using context API made me have extreme attention on rerenders. So I have no problem about understanding them. I also use useMemo sometimes but whenever I use I was hesitating because of the remark about useMemo in official docs as I mentioned above. I have been waiting to ask about this to someone "a true expert" like you on this case. Thanks for your answer. (Also In your example, if I was working on it, I would use useCallback instead of where ever you used use Memo. e.g Count over threshold : {getCountOverThreshould()} . Is there any drawback about this? useCallback instead of useMemo?)

[@jherr]

@@erdemsoydan4117 It's been a while since I've looked at the code in this video, but if the `countOverThreshold` is a simple value I don't really understand the value of creating an accessor for it. It's certainly less surprising from an API perspective to have it be a value, as opposed to an accessor that returns a value. Can you fill me in a little on your thinking and why you believe this approach is advantageous?

[@MrEnsiferum77]

Dependency graph, actually is topological sort in data structure context, or something similar.

[@jherr]

Fair. In this case I was looking for a term that captured the dependencies between the various pieces of state, derived state and effects.

[@krimod]

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.

[@jherr]

If you give me a time reference I'll give you my reasoning about useMemo.

[@aestheticallyamazing2003]

What intellisense did you use around 3:54 I'm totally mind blown

[@jherr]

That's Github Copilot.

[@ferooref7614]

Why do you need to destructure the array in 14:03 ?

[@jherr]

Math.min expects multiple arguments, like Math.min(10,20,30). If I do this Math.min([10,20,30]) then it just wants to min that one array. If I do this Math.min(...[10,20,30]) that turns into Math.min(10,20,30) and I get the min value.

[@philykearney]

Great video Jack as always. 👍 What vscode theme is that?

[@jherr]

Night Wolf [dark blue] with MonoLisa

[@philykearney]

@@jherr nice, thanks 🙏

[@shokhbozabdullayev6260]

Thanks for the great extension for diagramms)

[@MmmMmmGood17]

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!

[@jherr]

Thanks for the feedback!

[@lkd982]

brilliant demonstration

[@76Freeman]

Thank you very much Jack for this very informative and clear video.

[@sandeepgupta2476]

Can I add pokemon.length as dependecy in useMemo instead of whole pkemon array?

[@jherr]

Sure, but... If you changed the pokemon array to a new reference BUT the length remained the same, then that dependency wouldn't fire.

[@sandeepgupta2476]

@@jherr indeed, you made a greate point.

[@chenrvn]

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 :-)

[@jherr]

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.

[@NorweskiDrwal]

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 ;)

[@chenrvn]

@@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 :-)

[@gregstarr9633]

Most excellent video.. highly valuable.. thank u so much

[@osamaaburabie5684]

Great tutorial sir, I have a question whats the name of the extension for auto suggestions you're using.

[@jherr]

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.

[@osamaaburabie5684]

@@jherr I've signed for it couple weeks ago but i thought ur using something else haha. thanks for the quick response btw🙏

[@kunjuperath]

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!

[@jherr]

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. :)

[@kunjuperath]

Thanks for replying! That makes sense and I didn't know debounce was a thing tysm!

[@happygurha5062]

Love to see a demo on dependency injection with react context And react ui architecture patterns

[@Knowwhentobluff]

But isn’t use memo doing triple equals too? If I have two objects I’m comparing and I change something deep inside the object .. it isn’t going to trigger the useMemo

[@jherr]

That’s correct. If the reference doesn’t change then it won’t fire. But… you can depend on the deeply nested value.

[@Knowwhentobluff]

@@jherr I have a useMemo that I use that depends on react query data..I change the object property deep inside the project on a post call api call success response… but my useMemo doesn’t rerun for the new values.. maybe i have to go deeper in the object for my useMemo dependency array?

[@jherr]

@@Knowwhentobluff you should depend on the values you use in the memo, deeply nested or not.

[@Knowwhentobluff]

@@jherr even if useMemo is like “omg this is an unnecessary dependency”

[@PhilipAlexanderHassialis]

Oh.... and this is why Solid uses functions instead of primitive values in their createSignal, right? So essentially, since you invoke the function, the runtime "knows" what is dependent to something and renders only the appropriate part... is this a correct assumption Jack?

[@jherr]

Yes. Exactly.

[@novanoskillz4151]

Can someone explain the calculatePower function at 3:18 what are all of the + signs doing?

[@dokkenrox]

They're adding all the numbers in each variable together to get the total.

[@mikecastor2047]

What a fantastic resource!

[@carminetambascia6355]

Jack is the Lead Senior anyone wish to have. But anyone can have a bit watching his video

[@sidds5039]

Ah that comparison with Vue's 'computed' mechanism really cleared up a lot for me - thanks!

[@mansamusa559]

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!!

[@mansamusa559]

I'm learning so much from you thanks alot!!

[@0x0abb]

awesome work!

[@tarunsukhu2614]

You are a champion Jack! , Thank you

[@ShaggyKris]

By the way, what is that diagram extension that you're using?

[@jherr]

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.

[@ShaggyKris]

@@jherr Thanks!

[@buckyhelmsmash7670]

what's your vscode theme color?

[@jherr]

Night Wolf [black] and Operator Mono

[@codezero6023]

What plug-in are you using for diagrams in VS code?

[@jherr]

Cool, right? marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

[@vsakaria]

@@jherr Very cool!

[@Seb16291629]

Amazing

[@WCanyon]

Thanos joke was awesome

[@solo.traveller.28]

Hello jack , could you please tell us , which extension use for diagram plotting in vs code

[@jherr]

Diagram.io

[@MrEliyahilel]

You are awesome, thanks a lot!

[@NEGI_JI09]

Congratulate me) I finally found what I was looking for

[@dgcp354]

Ur home looks amazing

[@reanibutani9555]

Thank you very much Jack

[@rohithchittibommala2002]

What is theme u r using?

[@miguelyoutube100]

Thanks for the great video

[@NorweskiDrwal]

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

[@damonwu9658]

really good example 👍

[@jackh3242]

React hook form might be an interesting idea for a new video 😉

[@jherr]

I've done a couple previously on React hook form. I might add it to a speed run though. It's a great library.

[@mkman]

I love the pop culture references 😃

[@illiakhomenko6405]

amazing explanation, thank you!

[@kirillpavlovskii8342]

What is .dio files extension ? How does it work ?

[@jherr]

It's handled by a diagramming tool extension. marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

[@joelbrandao4]

Great content! Can someone explain the need for useCallback? I couldn't get it. Thanks!

[@thomasstambaugh5181]

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. :)

[@oussamaabdelwahed5594]

great content :D

[@ab0od179]

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).

[@jherr]

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.

[@ab0od179]

@@jherr Thanks for the advice, backend was also a challenge (in some way)

[@sourishdutta9600]

Really awesome 👌👏

[@AlexejStrelzow]

great video, thnx - just a small typo: it's Kent C Dodds, not Dobbs; or maybe it's a joke I don't get...

[@ob6217]

seems like you are in love with Pokemon hahahah

[@BenJi-di5mn]

I already know this ones gonna hurt me