Save Hours Of Work With These 5 Custom React Hooks
ฝัง
- เผยแพร่เมื่อ 21 ก.ค. 2024
- There are infinite possibilities for React hooks, but not all hooks are created equal. In this video I will be going over 5 incredibly powerful hooks that you can use in any project that are also super quick to implement.
📚 Materials/References:
GitHub Code: github.com/WebDevSimplified/u...
Part 1: • 5 Custom React Hooks Y...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:29 - usePrevious
02:20 - useStateWithHistory
06:33 - useStorage
09:06 - useAsync
11:18 - useFetch
#ReactHooks #WDS #React
Holy shit. This video is pure gold. Hats off to you Kyle !!!
These hooks are wild. Absolute GOLD.
Awesome Kyle. Love these useful practical custom hook tutorials!
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
Great job brotha, waitin for Part 3 ⭐⭐⭐
Kyle. You deserve a monument dude. For real.
At least a damn trophy. Legend.
These 5 are a lot better than the first 5. Thanks.
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.
Thank you so much Kyle. Keep doing the good work
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
when i started to familiriaze my self to js and react , this is my go to channel thumbs upp
Brilliant stuff, thank you
Thanks Kyle, I like ideas a lot. Thank You!
Thank you! Great content! :)
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!
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.
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.
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)
amazing video sir i learn something new today
Thanks for sharing
You are a king. Thank you sir.
Thanks, appreciated
My favorite channel lately. Although this video was too confusing for me. Going back to your useReduce video.
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
@@Zechey everyone is stupid. It's ok.
Thanks Kyle.
hi kyle -- can you do a series on typescript?
I've never had a very handsome guy taught me how to code. :)) Definitely make it easier to digest what's been taught.
this dude is great with react hooks
Wow complicated. Need to spend more time going over the custom hooks because there's a lot going on here.
ty
this is a banger video, the title is not clickbait at all. this will save me hours.
THIS IS 🔥
excellent 👍👍
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?
thanks bro
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
I was thinking the same I dont see any "initialValue" in the file
I guess he meant defaultValue instead of initialValue
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?
I guess its because changing ref.current doesnt cause a rerender yet it stores the value.
amazing
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?
@@agenticmark I think you did not get that correct. I mean to use an additional useMemo to the returning object, not the functions itself.
omg React is so good... and kyle is so good at it
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"
You can't use the hooks inside the function
But you can rewrite the useFetch function, so it will return also a handleFetch function, that could be passed to button as onClick.
10:18 why useffect Is doing here? Why it wraps useCallback?
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...
I like it
i cant understand what {capacity = 10 } = {} means like why are we doing = {} can someone please explain
I understand you
I like it and you too
if (typeof initialValue === 'function') shouldn't be if (typeof defaultValue === 'function')?
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
Could use JSON.stringify(function) to store it as text anyway. Then JSON.parse(function) to use it.
@@aliphian hmm, JSON.stringify(function) always returns an undefined ... so this would not work I suppose
This video made me feel like i knew nothing 😭😭
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
Can you make a hook for detecting browser back and forward button click.
👍
Not an react hooks, BrainHeater hooks . Its so much complicated to understand
export default function usePrevious(value) {
const previousRef = useRef()
useEffect(() => {
previousRef.current = value
}, [value])
return previousRef.current
}
isn't it the same but simpler?
it does not work when name changed.
This guy isn’t human
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
not so simple 4 me
I feel so stupid, cause have no idea where do we need all these custom hooks with a bunch of code inside it
Man, you speak so fast!
Kile hey
3rd
Kyle
666 000 to oktober
Didnt know u could use a hook inside a function and not just in top lvk! Wth!!!
that resulting function is a custom hook
@@aravindmuthu5748 yeai know! It doesnt mater is a custom hook! I have tried doing that similar with a custom hook and didnt let me
You are beautiful!
fuck..
amazing