5 Custom React Hooks You Need In Every Project

[@tevinmorake8924]

An unbeliezvaly useful hook . Nice save @Web Dev Simplified at 7:09

[@austinwhitbeck3362]

Just wanted to say that I'm really appreciative of your videos! Im going through a front end bootcamp at the moment and having succinct well explained bits and pieces of information that's easy to digest has helped/continues to help me a lot. Thank you so much!

[@HaykelBENJEMIA]

Regarding useTimeout, I think it should have an effect to clear the timeout when the component is unmounted.

[@HaykelBENJEMIA]

@@PetrSkorepa you're right! As the effect hook has dependencies, I thought the cleanup function would only run if those dependencies change, but actually all cleanup functions are run on unmount, no matter the dependencies. Thanks for the hint, helped me correct a misunderstanding 👍

[@sudarshankj]

At 8:15, shouldn't we do 'callback()' instead of 'return callback()' ?

[@zevspitz8925]

7:54 useUpdateEffect is triggered too early when in strict mode.

[@princebhanushali6255]

00:32 => 😃👍 , 01:58 => 🤯🤯

[@gasparRaduB]

@11:00 those `slice` methods don't require `a.length - 1` as the second argument, if you use `a.slice(index + 1)` it's going to default to slicing the array from that index until the end - either than that, really useful hooks - I also use them all the time

[@terryq5995]

and if the second argument was used, was it should just be a.slice(index + 1, a.length)? Because If a.length - 1, it would point to the last element of the array and slice method would not include that element into the new array?

[@gasparRaduB]

@@terryq5995 that's correct - you'd miss the last element in the array, but that might be desired if you're doing an "undo" action - I'd be similar to a ".pop()" with the exception that "pop" actually modifies the original array, whereas "slice" will produce a new array (a clone if you will)

[@user-fg6ng7ej6w]

great series of explanations of hooks

[@MiSt3300]

brilliant... simple, and understandable, yet so brilliant! You teach me how to code like a true artist! Thanks Kyle!

[@krige]

9:54 there seems to be a problem with update and remove: when you update or remove the last element is removed as well

[@jdawg011873]

Change the "a.length - 1" in both of those functions to simply "a.length"

[@sandeeptottadi]

Just learning them today and you are here.😍

[@codecleric4972]

I'll definitely try to pull these into some refactors at the office which will make my life easier. Thank you

[@eladmaderer1407]

I like your videos. Straight forward, no bullshit and crystal clear.

[@ינוןאלבז-כ1ז]

You're really simplifying the web for me

[@adek445]

In UseArray when removing second element it also removes your last element.

[@dave6012]

That’s enough complaining from the QA department

[@Ebizzill]

😍 that useArray hook!! ITS MINE NOW!

[@KoenVerheyen]

1:20 About the useToggle hook: do you need to use a callback function for the setValue parameter here or can you just use a value there also, based on the value variable in the outer scope? Obviously the value parameter for toggleValue would have to be renamed to something else the, like newValue eg.

[@soy1700]

useArray is a pretty interesting idea. This video has made me reconsider how I write my components, custom hooks look like they could potentially reduce boilerplate by a huge amount. Btw very small bug on your update function for useArray - appears to remove the last element

[@goldensonu15]

POINT ...

[@tslqs]

This is awesome thanks. Can you write these examples in typescript for a deeper understanding?

[@user-ti9yn8wg6o]

4:19 what is the point of putting clear and set function into useEffect dependency array? It's not that these two functions are supposed to change through time?

[@irinagr]

Love this! Thank you so much! I will definitely use the debounce and array! 😀

[@Idealist2011]

09:10 - what is the time complexity of useArray hook? Is it better than the native js methods though?

[@graficandorealidades7561]

Since no one commented it: nice guitar!!

[@lamargtv2572]

superb for useArray, love it

[@alihussnainghaffar1631]

Very nice and brilliant hooks

[@denyslysenko9617]

in the last hook we should remove '-1' in 'update' and 'remove' functions to make them work properly. thank you for the video.

[@zoran.grubic]

7:08 it's good to learn new words in English, like unbelizably, in web dev videos.

[@arpanmaurya96]

Are you sarcasming cause i googled that word and nothing came up

[@KidUncommon]

This is fantastic! Makes me feel better for my react interviews. Can’t wait for part 2!

[@josephwong2832]

awesome! love useful custom hooks examples

[@alecmather]

Such a great video, thanks homie 🎉

[@nikitazdvijkov3576]

useArray is brilliant! Thanks man!

[@adarshchakraborty]

All of them are cool, Thanks for bringing it up.

[@SuboptimalEng]

2020: Kyle 2021: Super Saiyan Kyle

[@sidisting1381]

These are very practical react tips. That was awesome, thanks `Web Dev Simplified`

[@jr-hp7er]

would love to see more such videos, Aweomse Kyle

[@TheDopoqob]

Why did the new 7s get removed at 10:04 along with index[1] on each click?

[@sniper32345]

Looks like bug with remove function. Probably "-1" in last slice is causing it

[@YuriiKratser]

Thanks, bro!

[@hikarukun5126]

I like your videos, I watched all shorts in 1 hour, and I want to look through all your videos. useArray is a definitely useful hook, but in my case, I would return a list of items, not an object, so you could have the same approach as useState has so instead of const { array: list, set: setList, push: add } = useArray([]); it would be const [ list, setList, add ] = useArray([]);

[@toluwalasetemitope2572]

Thank you

[@alexanonym1584]

10:55 how useArray know about a variable?

[@AkshatKumawat]

Insane quality content 🔥

[@sergeyplotnikov5031]

Simple and ingeniously

[@aleb687]

please someone award a Nobel prize to this guy

[@tadeuszjiwu255]

gr8, thank You!

[@jn674]

thank you

[@sap____7475]

This helps a lot😀 a custom hook for the memory leak problem?

[@ridl27]

great! ty

[@ankitshukla8640]

Hey Kyle can you implement number input buttons behaviour using two buttons for increment and decrement on click and keep changing till click hold ends?

[@mistekfcio]

useArray seems like it will be a mess if you want multiple arrays in one component. Wouldn't it be easier to add some prototype functions?

[@hurtkey8162]

just don't deconstruct them

[@MrMudbill]

Indeed, if you don't destructure you could do array1.push() and array1.array. Alternatively you could rename the destructured elements. const { array: firstArray, push: firstPush } = useArray(); const { array: secondArray, push: secondPush } = useArray(); I'd probably prefer the former though.

[@leetaipe]

It would be much easier to work with Angular.

[@mistekfcio]

@@MrMudbill but that's like literally creating an unnecessary problem and getting a solution for it. But that's frontend in general

[@ajaysatish8720]

As usual hyped up for ur content. 🔥🙂

[@0xPanda1]

really helpful hooks thank you a lot

[@lakshanjayawaradana2024]

I think you should add some kind of sick lights in your background

[@viswanathank2551]

Useful stuff 👍💯🔥

[@Stoney_Eagle]

I've been declaring my timeout outside of the component and clearing before calling the setTimeout, this is a bit more sophisticated hehe. I implemented your useLocalStorage and UseSocket hook and i realy like them.

[@sudarshankj]

Brilliant!

[@paxdriver]

Great tools! It would be nice in a longer, slower walk through imho

[@Leedimy]

Just wow. It will definately helful , thanks for sharing this

[@shyriu293]

That toggleValue function should be an useCallback function, just in case, for some reason, someone needs to set it a a dependency in an useEffect

[@JM-st1le]

Awesome hooks, will certainly be using them in my projects to prevent repetitions. Waiting for part 2. I think there is a bug in the update and remove functions of the useArray hook, the last elements of the array aren't included in ...a.slice(index, a.length - 1)

[@deepfuchsia7204]

Speaking of the last hook, what do you think of using a combination of splice + [...a] instead of those slices? The update function would look like this ``` const update = (oldValueIndex, newValue) => setArray(array.splice(oldValueIndex, 1, newValue) && [...array]); ```

[@hikarukun5126]

nice

[@tienlx91]

10:35 all function suppose to use a.length instead of a.length - 1 setArray(a => [ ...a.slice(0, index), ...a.slice(index + 1, a.length - 1), // WRONG ]); Use this: setArray(a => [ ...a.slice(0, index), ...a.slice(index + 1, a.length), // Correct , remove - 1 ]);

[@StefanoBallad]

Amazing!

[@trungbuinam6058]

OMG :D Thank you so much.

[@temzeks]

It would be cool if you create a video about custom toast component

[@Hooghog]

Excellent video as always, can't wait to use these hooks! One question - for useUpdateEffect, why is callback() being returned (implying cleanup?) rather than just being executed (i.e. without return)? Thanks again for your amazing content 🙏🏻

[@supergoteam]

The callback isn't being returned it's the result of the callback. i.e. callback != callback(). In his example callback is a function that returns alert. The return of calling alert is undefined so effectively the same as no having a return on the useEffect. Seems somewhat accidental in this example however it does also mean that if you actually provided a return that was a cleanup function inside your callback then it would run.

[@JM-st1le]

@@supergoteam Using it that way would be brilliant

[@zevspitz8925]

Ultimately the return value is then passed to useEffect for unmounting. Thus, useUpdateEffect presents the same API as useEffect.

[@goldensonu15]

Thanks bro......

[@xXMrBuddymanXx]

The useUpdateEffect Hook doesn't work in react@18. Any Idea how to make it work?

[@kikiken4287]

Thanks for the good video! I've got a question about 'useTimeOut'. As you explained, without useCallback hook, different callback function gets passed in always. So you use 'useRef' to fix it. and use 'useEffect' to update. but, dependency for useEffect ([callback]) is different always! So it gets updated unless you use 'useCallback'. So I think, you should use either useCallback, or pass dependency into useTimeout to update callback like below. export function useTimeOut(callback, delay, dependency) { const callbackRef = useRef(); const timeOutRef = useRef(); useEffect(() => { console.log('callback update'); callbackRef.current = callback; }, [dependency]); ... }

[@InstituteOfIndependence]

He fixed another things. Try this: const UseTimeoutExample:FC = ()=>{ const [count, setCount] = useState(10); const [delay, setDelay] = useState(2000) const [callback, setCallback] = useState(()=>()=>setCount(0)) const {clear, reset} = useTimeout(callback,delay) return ( {count} setCount(prev=>prev+1)}>Increment setDelay(prev=>prev*2)}>Update Delay setCallback(()=>()=>setCount(1000))}>Update Callback Clear Timeout Reset Timeout RUN ) } and this (without useRef and useEffect): const set = useCallback(()=>{ timeoutRef.current = setTimeout(()=>callback(), delay) },[delay]) Click "Update Callback". Click "Reset Timeout". You will have always 0. (with useRef you will have 1000)

[@ZahraKhaliq-yv2pk]

I actually tested this and even though the callbackRef is set on every render, the other useeffect that sets the timer is not called on every render probably because when a ref updated it does not cause another render and the effect only has dependency of delay so it will no run until delay is changed

[@BijanProgrammer]

Awesome!

[@davideforestali8558]

what if I need to set a value both in the custom hook and the component where it's used? I'm creating a custom hook for two components (a grocery list and a pantry list) that use the same logic for when an ingredient is edited. part of this logic is setting the editing ingredient and the id of the ingredient processing (setEditingIngredient and setIngredientIdProcessing). Now, there are also needed inside each component (groceryList and Pantry), within logics that are not shared between them. For example, you can mark ingredients as checked (taken) in groceryList but not in Pantry. how would I handle that? Thanks

[@tuananhdo1870]

I love useDebounce and usePrevious

[@Sankaritarina89]

Noob question: what's the benefit of using useArray hook over just using a regular array together with lodash that has all these functions?

[@ukaszzbrozek6470]

There isn't one. Debounce can also be imported from lodash.

[@MrMudbill]

The benefit is probably just in case you're not using Lodash. Generally adding a big library for a single function isn't worth it, but if you're already using Lodash, then you should use it as much as it's useful for.

[@ukaszzbrozek6470]

@@MrMudbill If you use webpack 4 or higher there is option called tree shakin. All unused modules of lodash are cut from production build. There is no disadvatages of using lodash.

[@axe1238]

can someone explain why he used the callback hook in set and clear or reset in timeout hook ??

[@Saniekasmara]

i'm a lil bit confused in useTimeout why we need the callbackRef? as far as i know the only one that we need persistent reference is in timeoutRef?

[@marielhan7176]

you can do useCallback in parent component to avoid to recreate functions when render, or Kyle's way, callbackRef, because the useEffect hooks which called set(), with the setTimeout func will never always been triggered if you use callbackRef, otherwise, when callback re-created, setTimeout will always been called.

[@jamesjohnson5386]

why do you store callback inside useRef?

[@surajbande5841]

@kyle I want small suggestion Best practice for api request response encryption in angular or react. Please share any useful link if you have 🙈. Thank you!

[@llubaka]

Do you have a git where we can get the code?

[@lehuynhuc656]

Love this! Thank you so much! Can you make redux video?

[@hamzahussain8604]

its insane

[@-leovinci]

Can I use React and Web Component at the same project?

[@TheScriptingLegend]

Yo Kyle you think you can make a video on how to make a whiteboard animation website. Can’t seem to figure it out

[@DJenriqez]

lol, that use array, is amazing,....

[@sharatha6533]

Hi Kyle when can we expect Angular videos from your end 🙂

[@jekcom5381]

What if you have more than one array, how do you utilize the useArray hook?

[@aghileslounis]

You can just overwrite the return names for the vars like : const {array: arrayFruits, set: setFruits,...........} = useArray(....

[@darkmift]

Why is a copy of dependencies passed to usedebounce useeffect instead of the original?

[@GuilhermeCunhaDEV]

Because he adds the "reset" variable too

[@kbgagt]

Nice! Only thing I don't like about useArray you are wrapping the array and lose access to the underlying object. So if you wanted more complicated operations you would have to provider accessors to those underlying array functions provided by the language (like you did with filter). I still like the idea tho

[@WebDevSimplified]

This useArray hook still returns the array and a way to set the array so it still gives you a way to access the underlying array and set method.

[@kbgagt]

@@WebDevSimplified Oh cool, My fault I was mistaken

[@lucashoffmann3453]

Hey man! I am really struggling at the moment with this thought: I am learning front end development right now and just came across low-code no-code movement and was wondering what your thoughts are. Is it still worth learning stuff like react, nodejs and other things or do you think it's more worth to focus on stuff like webflow?

[@awesomesauce1989]

New stuff like that will keep coming out, but it takes ages to get implemented in real world use. I would advise you to keep learning frontend and just focus on learning one things at a time. Front end can seem daunting with so many libraries and new stuff coming out every day, dont get distracted with that. Just focus on one framework at a time and learn it till you are proficient with it.

[@jazzmaster89]

Agree with Vijaykumar, you should definitely learn frontend development. You have no idea how many opportunities may open up from it. My suggestion is to just attempt to build a simple project. Small baby steps.

[@lucashoffmann3453]

@@awesomesauce1989 Thank you so much. Your comment definitely makes me feel better. I am quite good at teaching myself and am now two month into learning front end. I've started learning with code academy but now 40% into it I feel like it's trying to show me to much at once. Do you think it makes sense to maybe just start learning react and then adjust to what's coming up in terms of problems and what I have to learn to push the project?

[@MrMudbill]

You probably learn best by doing, so yes. Try to make a small project with it and get a feel for how to solve problems.

[@mikesmith8296]

Can anyone explain, why is he persisting the callback in useTimeout: const callbackRef = useRef(callback) Why not to use this callback right away?

[@milosstevanovic2953]

I assume that's because he always wants to have the latest callback reference when timeout kicks in. Otherwise the change to callback would just be ignored, or he would have to reinstantiate the timout everytime it changes.

[@ThePlayer-sz5np]

Why 2spaces on tabs?

[@brianevans4]

I've never understood why react didn't build in a default useArray hook. It is such a common operation when developing UIs, and it isn't opinionated at all because it's the exact same functions on the Array prototype. Why does every single developer need to reimplement this common functionality? I can't count the number of times I have typed setList(prevState=>[...prevState, item])

[@FaysalBDev]

how about useAuth?

[@georgesava1]

Content is good, 2 unskippable ads in a row not that much

[@vikrantshah1633]

Make an npm package or make a pull request to react

[@mmgordion]

Why not typescript?

[@dasten123]

What is React, some kind of Vue plugin?

[@DEVDerr]

What are those? Some type of Angular modules?

[@ayush.kumar.13907]

@@DEVDerr what are those, some new HTML tags?

[@DEVDerr]

@@ayush.kumar.13907 What are those? Another XML abstractions?

[@rateforxrateforx8030]

@@DEVDerr what's that? A text file with rice on it?

[@stanislavidalgo3661]

can you make videos about vue

[@antoniocestari5775]

The problem with the useArray is the name of the functions. If you use useArray with more than 1 array you have to rename the functions for each array 🤔

[@TheVitkuz]

Great

[@PerceptronGameplay]

nice

[@CraigMitchell]

React does give you great benefits. However, the fact that you need these hooks in the first place, shows the downside of React.

[@bitmammothOG]

functional programming in an old oop source seems fine to me lol