Learn Custom Hooks In 10 Minutes 

damm, i am hooked now

i have finished all this react hook series in this channel, literally worth every seconds. Thanks Kyle

Great series. You really helped me figure out the difference between the different types of react hooks. I was not having the easiest time trying to figure it out looking through other people's code. Thanks man. Keep the videos coming. You're great at what you do!

You have the best tutorials. You never add a bunch of unnecessary commentary and for that I thank you.

Wow man. You really have made the web simplified for us to build our project. Awesome content as always👏

I'm usually not using custom-hooks because I lack the imagination where to use them, and video just gave me 2 great ideas, thanks ! :) It would be great if you could do more videos regarding different common custom-hooks like these ones.

Please keep this up this is really great. I just finished your entire hooks Playlist. Thank you😊

The way you explain it, i am in awe of it.

Thanks Kyle... These videos are really helpful for beginners.

It's worth taking note that the views counts for this series dropped from 216,154 views (1st video) to 42,597 views (last video), maybe means there 's a learning curve; and I am proud that I watched all and code along. Great work Kyle!!!

Thanks for the great series on react hooks. Will definitely have to go through it a 2nd time to let all the details sink in. But I have good overview of it now.

Thanks so much for these videos, they are very concise and easy to follow.

Thank you! This is very much simplified to me!

Your video's is awesome. It's so simple to understand what you are saying! Thank you so much!

you are one of the best that explains, thanks a lot for all the useful information

You're really simplifying the web for me

Thanks a lot for this video. learnt something new today :)

Greatly explained the concept!

Thanks for simplifying react for us!

Great tutorial! Thank you for the explanation! 💛

great tutorial series, thank you so much

this video is so underrated, it should have like a billion likes. thank you

liked it, loved it, just the thing I was looking for. Thanks very much.

This example is perfect for me! I was creating a React project to manage Arkham Horror LCG stuff, and just had to saved in a big ol state. But for saving games serverlessly, local storage was gonna be the way I handled it. This idea will meld in nicely with saving my data, woot!

Superb kyle, every thing is clear

Awesome explanation, genius guy

best explanation ever!! thank you

really great tut. thanks dude

Great little video, as usual, Kyle.

Thanks for this great tutorial.

Thank you very much! great video

This is awesome, thanks so much.

very nicely explained

Good job man!

I am "hooked" to this channel..

Thanks a lot for the video.

RU-vid should make a two like button only for your channel because I would give you two likes

Great explanation kyle ..please make on one video Event loop

Awesome, thank you

useLocalStorage hook should be implemented in React by default, it makes the operations on local storage so clean i can't imagine doing it the "default" way again. Thanks for another great tutorial! :)

Hey, thanks again for another video! Can you make on related to wherr to store jwt on the client side?

amazing, thanks

Amazing video. I'm in love with you!

nice bro thanks for giving this video

i have three letters for this video WTF ---- hands-down best explanation of custom hooks... thanks Kyle.

awesome learnt about local storage and hooks

This is great!

i use redux toolkit and it helps me a lot. but really thanks for the video. we love u

React and hooks are so freaking fun. I just got my first job as dev and first task was creating a frontend all with hooks, apollo graphql, typescrypt and redux. When you figure it out you can play around with data really nicely. PS great channel

Great, thank you :)

thx already shared to Twitter

Thank you

thanks!

Awesome!

This is great. ONE SUGGESTION: The input writing like that all the time to storage may NOT be good for performance. You should probably DEBOUNCE the input: that is do NOT write it immediately, maybe you can write it to the state in-memory immediately but to wait before writing to storage... This is especially something to keep in mind if you want to adapt this use case for API usage. I believe the only thing that you'd need to do is just set a lambda with `setTimeout` wrapped around the `localStorage.setItem(...)`, and then from the `useEffect` return a `clearTimeout` with the lambda passed in as a parameter. Because `setValue` within `useLocalStorage` (which is returned to the calling function which us using the hook `useLocalStorage`) is already based on the default React hook which will take care of setting the information to local memory. You already address the performance issues with /reading/ at 5:40 , as you are only reading when you fetch the INITIAL VALUE, which will attempt to fetch from local storage or just return whatever value was passed in to be the initial value; this in turn activates the hook for `useEffect` below that puts it into local storage. Elegant. Nice stuff.

thanks, sir for such awesome video, if you possible please make some videos on react recoil.

Great ✨

Before knowing this...I also use to the same thing....saving things in local storage....today he made this a react custom hook Kyle do knows how to use his tools appropriately and in efficient way

It just works!

Hey, a question, does a hook persist and share the state through multiple component, like context-provider works?

at 1:19, what is the alternative for localstorage?, can we use useContext or redux for global storage, or even though if we use useContext or redux, the input value will become empty?

TL;DR: "It's just going to work" Great video 🙌🏼

Kyle, how do you get the localstorage in chrome to update when the state is changing? I had to refresh the localstorage to see the new value. Can you please help?

I am waiting for the MERN video ! :)

Mind blow video

Hi Kyle, I really like your videos and the quality of the image. What camera are you using? Thanks!

You can even add a deleteItem function inside useLocalStorage to delete the item if the user needs to

how can initialvalue be a function. i didn't get that part. can anyone explain please

Hi Kyle please make a video on Instant search filter like youtube on react.

You are the best

te quiero mucho, gracias

hello i have one question i want to use the usedispatch and useselector outside the function and class component. i have a helper.js in which i am trying to call the api by using redux saga for that i need to use usedispatch and then the response i want to get through useselector in same helper class. any idea how to achieve this

One question, why will initialValue be a function?

Thanks for the good video! But I think your useTimeout function should be like something like below. export function useTimeOut(callback, delay, dependency) { const callbackRef = useRef(); const timeOutRef = useRef(); useEffect(() => { console.log('callback update'); callbackRef.current = callback; }, [...dependency]); ... } because like you mentioned, callback without 'useCallback' is different always.

Is "if(initialValue instanceof Function) return initialValue();" necessary? Because if using a console.log() to print out whether it's true or false, we'd always get "false". So, what's the reason to use this line of code?

ty.

Really, really awesome video!! as always by the way I wanted to ask that can we make android apps in like plain javascript without using React Native and can we use js with C++ or python?Thanks!!

This was a great example... However if this example would help to stay login in after refreshing ..would be great

In getSavedValue function: "if (savedValue) return savedValue" What if savedValue is false or 0 or an empty string? Shouldn't it be like: "if (savedValue !== null) return savedValue" or am i mistaken?

Imagine getting hearted by one of the best teachers on the internet

love me some cutsom hooks

Can some1 explain to me why using a function in useState can help reduce the call on localstorage ?😊

so custom hooks combination of function and component we take argument and return / without return . also we can useEffect within it .

Do you have a course with Hooks + Redux ?

Hey viewers, comment your favorite custom hook that you think is very useful. For example, I use "useFormFields" and "useInput" in almost all my react projects.

god damn good tho full skilled in this shit :D thx for ur video

Even though how simple the last hook was it can be pretty handy in debugging stuff

this would definitely be helpful in react native 😀

Is there a way to change the key somehow, since I would love to have mutliple keys for every users that let's say loggs into my page.

legend

Why to create useUpdateLogger if you just can write console.log(value)?

when you type localstorate it get hightliged, what extension do that for you ?

Good

whats the configuration of your computer?

can you please create one more video , where we imlpement fetch web api in a cusom hook?

Can someone please explain: why assign a function in useState will reduce the call of localstorage, like he said in 5:20, "only call this once when first time rendering the component, not everytime render". I mean this function in useState still returns the result of function savedValue, so why not write like const [value, setValue] = useState(savedValue(key, initialValue)) ? Can anyone explain it?

actually i tried the same code with a signle function , in the same component, and it works fine, but i cant use useEffect inside a function,for that i just made a if check, and if we want to use a useEffect inside a function, that must be a react component, or a custom hook, that is fine, but here the important thing is with a custom hook we can use it several times, instead of writing the code again and again, thanks for the awesome video,

Why on the useEffect does React complain about ' key ' being a missing dependency? I've seen this in a couple tutorials now, has something changed with React?

someone can help me please ? i dont understand how the localStorage is updating because he didnt send the paramter of the name to the useLocalStorage hook but just constant paramaters ("name","") so how it works???

I don't understand, why don't we use useRef instead of useState? We could prevent un necessary re-renders right?