Save Hours Of Work With These 5 Custom React Hooks

[@dilliam1702]

These hooks are wild. Absolute GOLD.

[@sanghvian]

Holy shit. This video is pure gold. Hats off to you Kyle !!!

[@00_Andre_00]

Kyle. You deserve a monument dude. For real. At least a damn trophy. Legend.

[@eleah2665]

These 5 are a lot better than the first 5. Thanks.

[@jonathanruedas9735]

when i started to familiriaze my self to js and react , this is my go to channel thumbs upp

[@Skywalker37ful]

I wish you can make a video on when to make something as a component, when to refactor, like clean code for react. I face problems like this sometimes when two things have the exact same display like a big table for example but one displays one product and the other has to display an infinite amount based on user selection

[@Tkdanimal]

this is a banger video, the title is not clickbait at all. this will save me hours.

[@lansolo1991]

Except for useFetch, all these hooks are already available through react-use, why not point at their git repo ? I guess the point is to have a better understanding of how thins work under the hood using your own refactored version ? Anyway, that is still relevant to be aware of those helpers, thanks for your work!

[@JyotinderSingh]

With all the talk around external deps causing security problems, it's probably better to not have external dependencies for things you can (reliably) implement on your own. And yes as you mentioned, the learning process is important too.

[@nelsonfleig5024]

Good resource. It's always a good idea though to be able to implement this yourself so you can modify them to your needs since no two projects are the same.

[@mountakhabi]

Hello thanks I didn’t know react-use exist it looks really cool but I think here he want you to understand what happening exactly and that’s how you make progress and be able to implement only what you need ( you will probably never use all on them)

[@bobkazamakis5169]

Great job brotha, waitin for Part 3 ⭐⭐⭐

[@sudeepchoudhary5467]

amazing video sir i learn something new today

[@josephwong2832]

Awesome Kyle. Love these useful practical custom hook tutorials!

[@Human_Evolution-]

My favorite channel lately. Although this video was too confusing for me. Going back to your useReduce video.

[@Zechey]

I've been watching these custom hook videos and it feels like he is way too fast at explaining them for a newbie. Or then I am just too slow in the head

[@Human_Evolution-]

@@Zechey everyone is stupid. It's ok.

[@emilyaung2963]

I've never had a very handsome guy taught me how to code. :)) Definitely make it easier to digest what's been taught.

[@mrdoner3451]

Wow complicated. Need to spend more time going over the custom hooks because there's a lot going on here.

[@caseyhald]

You are a king. Thank you sir.

[@keshavchauhan2300]

Thanks Kyle.

[@dross6206]

Definitely, going to be using these. I’ll need to modify the useStorage to also allow creating cookies but other than that, this is a game changer

[@vdubz67]

hi kyle -- can you do a series on typescript?

[@hamidbakhtiari3986]

this dude is great with react hooks

[@RUFeelin]

Brilliant stuff, thank you

[@tadeuszjiwu255]

Thanks Kyle, I like ideas a lot. Thank You!

[@alexanonym1584]

10:18 why useffect Is doing here? Why it wraps useCallback?

[@ingles-u6b]

I think, It's to refresh the value of the state when you change the prop. Imagine you pass a fetch to get apples, and later on the same useAsync you want to use the orange fetch, to update the value you will need use effect. Also the useEffect will be executed when the component is mounting and when you change the prop. I think it is for that. Pls correct me if I said it wrong. i'm junior 😅😅

[@mohdhamza8219]

Thank you so much Kyle. Keep doing the good work

[@maximprosv]

Hello, thanks for the video. You probably have a mistake in useStorage hook if (typeof initialValue === 'function') { there is no initialValue, may be u wanted to use it like this: if (typeof defaultValue === 'function') { Thanks

[@mickaelrichard7255]

I was thinking the same I dont see any "initialValue" in the file

[@engelshernandez5898]

I guess he meant defaultValue instead of initialValue

[@igors.2943]

Thank you! Great content! :)

[@habib_nuhu]

Thanks for sharing

[@EMitkus]

Hi. Any reason why useRef is used so much in these functions? I noticed that most places the refs usually just store the state and you are changing it by assigning a new value to the ref.current. why so?

[@4Z0L1]

I guess its because changing ref.current doesnt cause a rerender yet it stores the value.

[@jdeso3]

I am building a responsive webpage which has a form on it in the form the first and last name fields are on the same line when the page gets narrower the input field for last name wraps down but the label does not then as it gets narrower the label will wrap is there anyway to make the label and input rap at the same time?

[@hurleywflow2227]

Thanks, appreciated

[@HALsc2]

omg React is so good... and kyle is so good at it

[@adicide9070]

thinking about using TS maybe? I think it'd not hurt people who even don't want to use it themselves to have some basic types in there...

[@spiderdev1678]

THIS IS 🔥

[@ariffaysal9458]

excellent 👍👍

[@ravenbrotzmann1874]

thanks bro

[@braham.prakash]

This video made me feel like i knew nothing 😭😭

[@miguelribeiro5073]

These hooks are pretty cool. Definitely going to be using them in the near future. I have one question though. In the useCallback ( callbackMemoized ) of the useAsync, do you think you could have used an useReducer hook, instead of 3 useState hooks? This way you would call only one state change before running the callback function.

[@wissendev5490]

Nice video Kyle but I have a question How can I use "useFetch" in a button click event I mean when I clicked the button then it'll run the "useFetch"

[@aswinkumar3431]

You can't use the hooks inside the function

[@Will4_U]

But you can rewrite the useFetch function, so it will return also a handleFetch function, that could be passed to button as onClick.

[@ridl27]

ty

[@CrAzZyKiLleR01]

Hi Kyle. When you create a custom hooks you wrap every method into a useCallback. Afterwards you are returning a new object every time the hook rerenders (without useMemo it will get a new object every time). This is probably not what you want, correct? I would suggest adding a useMemo arround the returning object (or array) or am I wrong?

[@CrAzZyKiLleR01]

@@agenticmark I think you did not get that correct. I mean to use an additional useMemo to the returning object, not the functions itself.

[@Pr0m0t3d]

if (typeof initialValue === 'function') shouldn't be if (typeof defaultValue === 'function')?

[@abdelrahmanmostafa9489]

i cant understand what {capacity = 10 } = {} means like why are we doing = {} can someone please explain

[@giwrgosiwannidis4684]

amazing

[@sumitbarthwal952]

Can you make a hook for detecting browser back and forward button click.

[@ferooref7614]

Would useStateWithHistoryWork event with "value" being a function ? .... I mean history would not be an array of numbers or strings but an array of functions

[@aliphian]

Could use JSON.stringify(function) to store it as text anyway. Then JSON.parse(function) to use it.

[@ferooref7614]

@@aliphian hmm, JSON.stringify(function) always returns an undefined ... so this would not work I suppose

[@HabiburRahman-uy6qv]

I understand you

[@igors.2943]

export default function usePrevious(value) { const previousRef = useRef() useEffect(() => { previousRef.current = value }, [value]) return previousRef.current } isn't it the same but simpler?

[@InstituteOfIndependence]

it does not work when name changed.

[@HabiburRahman-uy6qv]

I like it and you too

[@bwustinbweem]

This guy isn’t human

[@HabiburRahman-uy6qv]

I like it

[@user_at180]

Not an react hooks, BrainHeater hooks . Its so much complicated to understand

[@samsungfateh8686]

Thank you very much for the excellent training Please teach us how to upload a site when we write it And how to design a site-specific email form and send that email to all the company's customers

[@yaroslavoz]

I feel so stupid, cause have no idea where do we need all these custom hooks with a bunch of code inside it

[@ThePredsedatel]

not so simple 4 me

[@longisland1131]

Hey, does anyone want to work on something? I'm really looking for beginner programmers like myself to build anything. Maybe a really simple frontend of a website or even a tiny react application comment below. I just really want to collaborate with random people on something and see what that's like

[@yoonuspk3798]

👍

[@sasikantnair]

Man, you speak so fast!

[@thecutedreamkostasp.4449]

Didnt know u could use a hook inside a function and not just in top lvk! Wth!!!

[@aravindmuthu5748]

that resulting function is a custom hook

[@thecutedreamkostasp.4449]

@@aravindmuthu5748 yeai know! It doesnt mater is a custom hook! I have tried doing that similar with a custom hook and didnt let me

[@HabiburRahman-uy6qv]

Kile hey

[@samuelwilson00]

3rd

[@HabiburRahman-uy6qv]

Kyle

[@CTILET]

666 000 to oktober

[@YuriiKratser]

You are beautiful!

[@BorgMater]

fuck..

[@SamyarBorder]

amazing