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

@lutfiikbalmajid3128

2 жыл бұрын

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

@noccer

2 жыл бұрын

Same. A terrific teacher ☘️

@andresserron8596

2 жыл бұрын

indeed he rise the bar

@alexcooper4845

2 жыл бұрын

100%

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

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

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

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!

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

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

Man your explanations are so clear. Well done. Wish I had this kind of tuition when I was starting learning JS and 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

Your videos is on another level comparing to other KZread 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.

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

So glad to have found this channel, great content!

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

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

This is amazing content! Your examples are top notch

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 👌

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

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!

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

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

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

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

Really good stuff!

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

Thanks for the great extension for diagramms)

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

You are a champion Jack! , Thank you

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

brilliant demonstration

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

@jherr

2 жыл бұрын

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

awesome work!

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

2 жыл бұрын

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.

Happy birthday Jack!

@jherr

2 жыл бұрын

Thanks!

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!

Thanks for the great video

great content :D

amazing explanation, thank you!

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 very much Jack

Really awesome 👌👏

really good example 👍

I love the pop culture references 😃

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

2 жыл бұрын

Thanks for the feedback!

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

2 жыл бұрын

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

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.

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?

@jherr

2 жыл бұрын

Probably could have, yeah.

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

@jherr

2 жыл бұрын

A Varmilo VA87M my daughter got me for my birthday.

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

@jherr

2 жыл бұрын

OOTB feature. It's always been there.

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

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

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

@jherr

2 жыл бұрын

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

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

2 жыл бұрын

Whoops, my bad.

Nice! Thanks!

Ur home looks amazing

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

Awesome!

Nice, thanks

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

2 жыл бұрын

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

2 жыл бұрын

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

Just my two cents: the obvious quality of your videos will hopefully carry your KZread 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!

@jherr

2 жыл бұрын

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 KZread, 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 KZread, 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 KZread 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 KZread "purity" or go behind the paywall and pick up the their audiences and but also play to their editors fiddle.

@thatboyneedstherapy

2 жыл бұрын

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

@jherr

2 жыл бұрын

@@thatboyneedstherapy Thanks man. And feel free to keep keepin' me honest. :)

@PhilipAlexanderHassialis

2 жыл бұрын

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

Thanks!

Thanos joke was awesome

Thank you.

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

@jherr

2 жыл бұрын

Night Wolf [dark blue] with MonoLisa

@philykearney

2 жыл бұрын

@@jherr nice, thanks 🙏

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.

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

@jherr

2 жыл бұрын

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

seems like you are in love with Pokemon hahahah

You're really smart and stuff.

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

I already know this ones gonna hurt me

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.

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.

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!

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

@jherr

2 жыл бұрын

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

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

2 жыл бұрын

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

2 жыл бұрын

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

2 жыл бұрын

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

thanks

Jack, you're the fucking man, thank you

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 tutorial sir, I have a question whats the name of the extension for auto suggestions you're using.

@jherr

2 жыл бұрын

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

2 жыл бұрын

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

@jherr

2 жыл бұрын

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

@jujijiju6929

2 жыл бұрын

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

@jherr

2 жыл бұрын

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

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

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

2 жыл бұрын

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

2 жыл бұрын

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

Nice

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

2 жыл бұрын

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

2 жыл бұрын

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

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

2 жыл бұрын

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

2 жыл бұрын

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

What is theme u r using?

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

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

@jherr

2 жыл бұрын

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

2 жыл бұрын

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

2 жыл бұрын

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

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

@jherr

2 жыл бұрын

That's Github Copilot.

Holy sheet

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

@jherr

2 жыл бұрын

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

2 жыл бұрын

@@jherr Thanks!

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

@jherr

Жыл бұрын

Diagram.io