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.
Yup, I think we don't have the coders' minds YET!!! or maybe we need to throw ourselves into the fire of a working environment to get creative and find use cases of various programming concepts.
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!!!
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?
I don't know if you already found your answer, but just in case... When using a function as initial value for useState, we need to practice "CURRYING" or wrapping function executions in another function, like this: useState(( ) => someFunc( )) as opposed to just: useState(someFunc( )). This way, someFunc doesn't get called unnecessarily every re-render. It's not noticeable on small apps but treat it as an optimization with the way useState hook works. In the video, the data from local storage is only read at the initial component render. EDIT: Try putting a console.log( ) on the function and compare. The one with no currying will show the log every keystroke.
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!
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! :)
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
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!
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
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.
Can someone explain what he does starting 5:02? "And now we what we can do is use a function version...". As opposed to what? Does writing an explicit return statement make it a "function version"?
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?
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
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???
Okay after spending more time than I would like to admit, I finally figured it out! Notice that UseLocalStorage hook is returning [value, setValue]. Then in App.js it is [name, setName]. Here "setName" is actually the "setValue" function being returned by useLocalStorage hook. Therefore, when is being used on the onChange event it's actually updating "value" inside the custom hook and not "name" in App.js.
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?
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?
Now, why not to bring this to another level? build your custom hook useStateStore, then create useReducer inside, import store hook into your components and voila, you have global store like Redux. Also, you can privide that store using context api... :)
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.
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?
So lost. I cannot follow this video. Does anyone know of something even easier than this? I am like 10 hours into these and I feel like I know nothing.
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?
Hi guys, i still don't understand the use of the the callback function inside the useState in the localStorage exaple; can't we just write : useState(getSavedValue(key, initialValue); if someone can explain more i would appreciate it.
damm, i am hooked now
get out
what are yuo 14?
I see what you did there
Ahhhaha I love the pun😂
I like how you react to this vid
You have the best tutorials. You never add a bunch of unnecessary commentary and for that I thank you.
i have finished all this react hook series in this channel, literally worth every seconds. Thanks Kyle
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.
Yup, I think we don't have the coders' minds YET!!! or maybe we need to throw ourselves into the fire of a working environment to get creative and find use cases of various programming concepts.
this video is so underrated, it should have like a billion likes. thank you
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!!!
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?
I don't know if you already found your answer, but just in case...
When using a function as initial value for useState, we need to practice "CURRYING" or wrapping function executions in another function, like this:
useState(( ) => someFunc( ))
as opposed to just: useState(someFunc( )).
This way, someFunc doesn't get called unnecessarily every re-render. It's not noticeable on small apps but treat it as an optimization with the way useState hook works. In the video, the data from local storage is only read at the initial component render.
EDIT: Try putting a console.log( ) on the function and compare. The one with no currying will show the log every keystroke.
You're really simplifying the web for me
The way you explain it, i am in awe of it.
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!
Wow man. You really have made the web simplified for us to build our project. Awesome content as always👏
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! :)
you are one of the best that explains, thanks a lot for all the useful information
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
Id love to have that kida job
Thanks!
Thank you for the support!
I am "hooked" to this channel..
i have three letters for this video WTF ---- hands-down best explanation of custom hooks... thanks Kyle.
Thanks so much for these videos, they are very concise and easy to follow.
i use redux toolkit and it helps me a lot. but really thanks for the video. we love u
Please keep this up this is really great. I just finished your entire hooks Playlist. Thank you😊
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!
Thanks for simplifying react for us!
Your video's is awesome. It's so simple to understand what you are saying! Thank you so much!
Thanks Kyle... These videos are really helpful for beginners.
Thanks bro, You're a lifesaver 😍🤜🏻🤛🏻
UA-cam should make a two like button only for your channel because I would give you two likes
best explanation ever!! thank you
Thanks a lot for this video. learnt something new today :)
Superb kyle, every thing is clear
Great tutorial! Thank you for the explanation! 💛
Greatly explained the concept!
Awesome explanation, genius guy
really great tut. thanks dude
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
Thank you! This is very much simplified to me!
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.
Can someone explain what he does starting 5:02? "And now we what we can do is use a function version...". As opposed to what? Does writing an explicit return statement make it a "function version"?
Thanks for this great tutorial.
One question, why will initialValue be a function?
Imagine getting hearted by one of the best teachers on the internet
Great little video, as usual, Kyle.
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?
Good job man!
great tutorial series, thank you so much
Thank you very much! great video
Amazing video. I'm in love with you!
very nicely explained
This is awesome, thanks so much.
how can initialvalue be a function. i didn't get that part. can anyone explain please
nice bro thanks for giving this video
awesome learnt about local storage and hooks
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
liked it, loved it, just the thing I was looking for. Thanks very much.
Great explanation kyle ..please make on one video Event loop
5:20 I thought this is about simplifying tricky Custom Hooks, and not complicating them, so pointless
thx already shared to Twitter
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???
Okay after spending more time than I would like to admit, I finally figured it out!
Notice that UseLocalStorage hook is returning [value, setValue]. Then in App.js it is [name, setName]. Here "setName" is actually the "setValue" function being returned by useLocalStorage hook. Therefore, when is being used on the onChange event it's actually updating "value" inside the custom hook and not "name" in App.js.
@@azgexHQ thank you bro ! very good explanation:)
Thanks a lot for the 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?
Great Tutorial on Custom Hooks in React. Thanks, Kyle
{2022-02-24}, {2022-08-02}, {2022-11-16}, {2023-06-28}
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?
You can even add a deleteItem function inside useLocalStorage to delete the item if the user needs to
Now, why not to bring this to another level? build your custom hook useStateStore, then create useReducer inside, import store hook into your components and voila, you have global store like Redux. Also, you can privide that store using context api... :)
amazing, thanks
Can some1 explain to me why using a function in useState can help reduce the call on localstorage ?😊
This was a great example... However if this example would help to stay login in after refreshing ..would be great
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.
Hey, a question, does a hook persist and share the state through multiple component, like context-provider works?
this would definitely be helpful in react native
😀
Hey Bharat
Have you built any react projects recently? Are you open to internship/job opportunities in software development ?
Hi kyle, i'm getting an error like as ReferenceError: localStorage is not defined, when doing as same as you do. please help
Oops i understand that, Am using Next JS tht why i'm getting an error bcoz of localStorage is not the part of server side, its is client side. thanks
I don't understand, why don't we use useRef instead of useState?
We could prevent un necessary re-renders right?
He used usestate so he could log and show the input changing on each keystroke, he needs the re render for that
Awesome, thank you
thanks, sir for such awesome video, if you possible please make some videos on react recoil.
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?
This is great!
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.
Hi Kyle, I really like your videos and the quality of the image. What camera are you using? Thanks!
It is a logitech brio shooting in 1080p
@@WebDevSimplified Thanks a lot!
so custom hooks combination of function and component we take argument and return / without return . also we can useEffect within it .
Dude how are you making your hair like that every day :D
I am waiting for the MERN video ! :)
Can i say custome hooks have the same purpose like HOC in class component.
render props and hoc do the same kind of thing i guess
Great ✨
So lost. I cannot follow this video. Does anyone know of something even easier than this? I am like 10 hours into these and I feel like I know nothing.
Same here
@@Viv-m8j been a paid dev for over a year now. Still confused lol
Even though how simple the last hook was it can be pretty handy in debugging stuff
Hey Rohin
Have you been working on any react projects currently? Are you open to internship/job opportunities in software development ?
Thank you
whats the configuration of your computer?
Great, thank you :)
Hey, thanks again for another video! Can you make on related to wherr to store jwt on the client side?
just a little improvement, for the the custom hook we can use named-parameters, in that way the order of the parameters does not matter.
when you type localstorate it get hightliged, what extension do that for you ?
Es7 react redux
It just works!
I ate these fucking hooks bcz of you, the great Kyle
Please my custom hooks returns error usewindowsize is not a function
Use Google to debug
Hi Kyle please make a video on Instant search filter like youtube on react.
Mind blow video
You are the best
Why to create useUpdateLogger if you just can write console.log(value)?
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?
thanks!
Hi guys, i still don't understand the use of the the callback function inside the useState in the localStorage exaple;
can't we just write : useState(getSavedValue(key, initialValue);
if someone can explain more i would appreciate it.
Don't ask questions in UA-cam comments, people aren't actively checking to give assistance. Use Google to ask questions