Tap to unmute

Save Hours Of Work With These 5 Custom React Hooks

  Рет қаралды 68,407

Web Dev Simplified

Web Dev Simplified

Күн бұрын

Пікірлер: 83
@sanghvian
@sanghvian 3 жыл бұрын
Holy shit. This video is pure gold. Hats off to you Kyle !!!
@dilliam1702
@dilliam1702 3 жыл бұрын
These hooks are wild. Absolute GOLD.
@00_Andre_00
@00_Andre_00 3 жыл бұрын
Kyle. You deserve a monument dude. For real. At least a damn trophy. Legend.
@eleah2665
@eleah2665 3 жыл бұрын
These 5 are a lot better than the first 5. Thanks.
@jonathanruedas9735
@jonathanruedas9735 3 жыл бұрын
when i started to familiriaze my self to js and react , this is my go to channel thumbs upp
@Skywalker37ful
@Skywalker37ful 3 жыл бұрын
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
@lansolo1991
@lansolo1991 3 жыл бұрын
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
@JyotinderSingh 3 жыл бұрын
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
@nelsonfleig5024 3 жыл бұрын
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
@mountakhabi 3 жыл бұрын
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)
@Tkdanimal
@Tkdanimal 3 жыл бұрын
this is a banger video, the title is not clickbait at all. this will save me hours.
@bobkazamakis5169
@bobkazamakis5169 3 жыл бұрын
Great job brotha, waitin for Part 3 ⭐⭐⭐
@Human_Evolution-
@Human_Evolution- 3 жыл бұрын
My favorite channel lately. Although this video was too confusing for me. Going back to your useReduce video.
@Zechey
@Zechey 3 жыл бұрын
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-
@Human_Evolution- 3 жыл бұрын
@@Zechey everyone is stupid. It's ok.
@sudeepchoudhary5467
@sudeepchoudhary5467 3 жыл бұрын
amazing video sir i learn something new today
@mrdoner3451
@mrdoner3451 3 жыл бұрын
Wow complicated. Need to spend more time going over the custom hooks because there's a lot going on here.
@josephwong2832
@josephwong2832 3 жыл бұрын
Awesome Kyle. Love these useful practical custom hook tutorials!
@emilyaung2963
@emilyaung2963 2 жыл бұрын
I've never had a very handsome guy taught me how to code. :)) Definitely make it easier to digest what's been taught.
@dross6206
@dross6206 2 жыл бұрын
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
@vdubz67 3 жыл бұрын
hi kyle -- can you do a series on typescript?
@hamidbakhtiari3986
@hamidbakhtiari3986 3 жыл бұрын
this dude is great with react hooks
@RUFeelin
@RUFeelin 2 жыл бұрын
Brilliant stuff, thank you
@keshavchauhan2300
@keshavchauhan2300 3 жыл бұрын
Thanks Kyle.
@tadeuszjiwu255
@tadeuszjiwu255 3 жыл бұрын
Thanks Kyle, I like ideas a lot. Thank You!
@caseyhald
@caseyhald 2 жыл бұрын
You are a king. Thank you sir.
@mohdhamza8219
@mohdhamza8219 3 жыл бұрын
Thank you so much Kyle. Keep doing the good work
@maximprosv
@maximprosv 3 жыл бұрын
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
@mickaelrichard7255 3 жыл бұрын
I was thinking the same I dont see any "initialValue" in the file
@engelshernandez5898
@engelshernandez5898 3 жыл бұрын
I guess he meant defaultValue instead of initialValue
@igors.2943
@igors.2943 3 жыл бұрын
Thank you! Great content! :)
@HALsc2
@HALsc2 3 жыл бұрын
omg React is so good... and kyle is so good at it
@habib_nuhu
@habib_nuhu 3 жыл бұрын
Thanks for sharing
@EMitkus
@EMitkus 3 жыл бұрын
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
@4Z0L1 3 жыл бұрын
I guess its because changing ref.current doesnt cause a rerender yet it stores the value.
@alexanonym1584
@alexanonym1584 7 ай бұрын
10:18 why useffect Is doing here? Why it wraps useCallback?
@ingles-u6b
@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 😅😅
@hurleywflow2227
@hurleywflow2227 3 жыл бұрын
Thanks, appreciated
@ariffaysal9458
@ariffaysal9458 3 жыл бұрын
excellent 👍👍
@miguelribeiro5073
@miguelribeiro5073 3 жыл бұрын
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.
@jdeso3
@jdeso3 3 жыл бұрын
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?
@ridl27
@ridl27 3 жыл бұрын
ty
@adicide9070
@adicide9070 3 жыл бұрын
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...
@braham.prakash
@braham.prakash 3 жыл бұрын
This video made me feel like i knew nothing 😭😭
@spiderdev1678
@spiderdev1678 3 жыл бұрын
THIS IS 🔥
@ravenbrotzmann1874
@ravenbrotzmann1874 3 жыл бұрын
thanks bro
@CrAzZyKiLleR01
@CrAzZyKiLleR01 3 жыл бұрын
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
@CrAzZyKiLleR01 3 жыл бұрын
@@agenticmark I think you did not get that correct. I mean to use an additional useMemo to the returning object, not the functions itself.
@wissendev5490
@wissendev5490 3 жыл бұрын
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
@aswinkumar3431 3 жыл бұрын
You can't use the hooks inside the function
@Will4_U
@Will4_U 3 жыл бұрын
But you can rewrite the useFetch function, so it will return also a handleFetch function, that could be passed to button as onClick.
@Pr0m0t3d
@Pr0m0t3d 3 жыл бұрын
if (typeof initialValue === 'function') shouldn't be if (typeof defaultValue === 'function')?
@abdelrahmanmostafa9489
@abdelrahmanmostafa9489 3 жыл бұрын
i cant understand what {capacity = 10 } = {} means like why are we doing = {} can someone please explain
@giwrgosiwannidis4684
@giwrgosiwannidis4684 3 жыл бұрын
amazing
@samsungfateh8686
@samsungfateh8686 3 жыл бұрын
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
@sumitbarthwal952
@sumitbarthwal952 2 жыл бұрын
Can you make a hook for detecting browser back and forward button click.
@HabiburRahman-uy6qv
@HabiburRahman-uy6qv 3 жыл бұрын
I understand you
@bwustinbweem
@bwustinbweem 3 жыл бұрын
This guy isn’t human
@ferooref7614
@ferooref7614 3 жыл бұрын
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
@aliphian 3 жыл бұрын
Could use JSON.stringify(function) to store it as text anyway. Then JSON.parse(function) to use it.
@ferooref7614
@ferooref7614 3 жыл бұрын
@@aliphian hmm, JSON.stringify(function) always returns an undefined ... so this would not work I suppose
@HabiburRahman-uy6qv
@HabiburRahman-uy6qv 3 жыл бұрын
I like it and you too
@user_at180
@user_at180 3 жыл бұрын
Not an react hooks, BrainHeater hooks . Its so much complicated to understand
@igors.2943
@igors.2943 3 жыл бұрын
export default function usePrevious(value) { const previousRef = useRef() useEffect(() => { previousRef.current = value }, [value]) return previousRef.current } isn't it the same but simpler?
@InstituteOfIndependence
@InstituteOfIndependence 2 жыл бұрын
it does not work when name changed.
@ThePredsedatel
@ThePredsedatel 3 жыл бұрын
not so simple 4 me
@HabiburRahman-uy6qv
@HabiburRahman-uy6qv 3 жыл бұрын
I like it
@yaroslavoz
@yaroslavoz 3 жыл бұрын
I feel so stupid, cause have no idea where do we need all these custom hooks with a bunch of code inside it
@sasikantnair
@sasikantnair 3 жыл бұрын
Man, you speak so fast!
@HabiburRahman-uy6qv
@HabiburRahman-uy6qv 3 жыл бұрын
Kyle
@yoonuspk3798
@yoonuspk3798 3 жыл бұрын
👍
@HabiburRahman-uy6qv
@HabiburRahman-uy6qv 3 жыл бұрын
Kile hey
@longisland1131
@longisland1131 3 жыл бұрын
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
@CTILET
@CTILET 3 жыл бұрын
666 000 to oktober
@thecutedreamkostasp.4449
@thecutedreamkostasp.4449 3 жыл бұрын
Didnt know u could use a hook inside a function and not just in top lvk! Wth!!!
@aravindmuthu5748
@aravindmuthu5748 3 жыл бұрын
that resulting function is a custom hook
@thecutedreamkostasp.4449
@thecutedreamkostasp.4449 3 жыл бұрын
@@aravindmuthu5748 yeai know! It doesnt mater is a custom hook! I have tried doing that similar with a custom hook and didnt let me
@samuelwilson00
@samuelwilson00 3 жыл бұрын
3rd
@YuriiKratser
@YuriiKratser 3 жыл бұрын
You are beautiful!
@BorgMater
@BorgMater 3 жыл бұрын
fuck..
@SamyarBorder
@SamyarBorder 3 жыл бұрын
amazing
Make React Easy With These 5 Custom React Hooks
9:13
Web Dev Simplified
Рет қаралды 33 М.
Speed Up Your React Apps With Code Splitting
16:50
Web Dev Simplified
Рет қаралды 396 М.
“Don’t stop the chances.”
00:44
ISSEI / いっせい
Рет қаралды 62 МЛН
Tuna 🍣 ​⁠@patrickzeinali ​⁠@ChefRush
00:48
albert_cancook
Рет қаралды 148 МЛН
Learn useReducer In 20 Minutes
20:12
Web Dev Simplified
Рет қаралды 521 М.
I'm Ditching Try/Catch for Good!
10:29
Web Dev Simplified
Рет қаралды 190 М.
React Hooks Course - All React Hooks Explained
1:26:21
PedroTech
Рет қаралды 1,1 МЛН
How To Use Libraries Like A Senior Dev
9:53
Web Dev Simplified
Рет қаралды 49 М.
10 React Hooks Explained // Plus Build your own from Scratch
13:15
Fireship
Рет қаралды 1,4 МЛН
How To Handle Permissions Like A Senior Dev
36:39
Web Dev Simplified
Рет қаралды 300 М.
Save Hours Debugging With These React Hooks
9:24
Web Dev Simplified
Рет қаралды 38 М.
Junior vs Senior React Folder Structure - How To Organize React Projects
16:16
React 18 useTransition Hook Crash Course
7:50
Web Dev Simplified
Рет қаралды 157 М.
Every Big React App Needs These 5 Custom Hooks
10:36
Web Dev Simplified
Рет қаралды 34 М.