5 More Custom React Hooks You Need In Every Project

[@alirezamohammadi9691]

the last one is a game changer !😂😂🔥🔥🔥🔥. thank you bro for this useful playlist of custom hooks❤

[@eliamzg]

I've learned so much from this series, useDebounce and useOnScreen are personal favorites of mine, I do have a custom useForm hook that takes initial state and a reducer to handle everything related to the form: validation, error messages, field binding, resetting and disabling, but the way you implemented the validation gives me an idea of how I can refactor it :) thanks a bunch!

[@Skia_]

It would be great if you could share a gist or something ;D

[@maacpiash]

I'd love to see the `useForm` hook that you implemented. I'm having a hard time with forms in a React project at work. I didn't go for the React form libraries like `react-hook-form` because I'm using Material UI, which is hard to integrate with those libraries, because everything becomes complicated.

[@eliamzg]

@@Skia_ Here you go, that's more than a gist, I'm pretty sure it could be improved upon since I am still learning, and I did remove some particularities that I needed for my own project.

[@eliamzg]

@@maacpiash hello Ahad, sure, check it out. Personally I like material, but I'm not fond of component libraries because whenever something doesn't fit the mold things get complicated, I opted to make my own components so the state reflects what the components use internally. Maybe you could tweak to pass the right props to the components in the library.

[@Skia_]

It looks like you tried to share a github gist but youtube filtered it out :p

[@MaNiarus]

Your useSize hook really helps me a lot ) thx

[@MrZeus7]

Just wanna mention informed here for dealing with forms, its awesome

[@someonewhowantedtobeahero3206]

Very helpful. Thanks, Kyle.

[@CadisDiEtrama000]

One comment on the useStateWithValidation. For example, we have a login form like you showed and we want to show if it is valid or not only after the user stopped typing, or went to the next input. It makes more sense to me, and I use that logic in my projects... I just changed the first part with the help of useUpdateEffect, and voila: const [ state, setstate ] = useState(initialValue); const [ isValid, setIsValid ] = useState(null); useUpdateEffect(( ) => { setIsValid(validationFunction(state)); }, [state]); The only thing is you have 3 things to check in the form itself, if you want to do it like I did. Normal input with valid/invalid indicators: { state ? "Valid" : state == false ? "Not valid" : "Show only input" }

[@ChrisAthanas]

Clear and succinct, great tutorial

[@ridl27]

ty Kyle! love ya, love react, love hooks, hate angular!

[@lescobrandon2202]

Thanks buddy, these custom hooks are awesome!

[@Aprofox]

you are live legend bro ...

[@MrAlexdunlop]

Awesome video! Thanks for the great useHooks. Just one note for anyone using useGeolocation, place setData(e.coords) above setLoading(false) The order in which the run ended up effected my project.

[@spacexengineer]

sick. earned a sub

[@jr-hp7er]

I am learning a lot from this series. Can you also cover the performance benchmark and optimizations

[@bokoteslo8950]

Thanks man!)

[@peryMimon]

note: kzbin.info/www/bejne/n6u7eaaQapyIhtU, in useStateWithValidation you can directly write like that : const [state, setState] = useState(initialState); const [isValid, setIsValid] = useState(null); const setValue = (value) => { const isValid = validator(value); setState(value); setIsValid(isValid); } return [state, setValue, isValid];

[@nines9869]

Thank you, sir

[@bobkazamakis5169]

Amazing series Kyle, keep em coming 🙌💥

[@victorlongon]

Great video as the others (have just checked the whole series). I have used a lost of them with some slightl variations. I would just like to say that it is tempting to try to use the useWithValidation for forms but tbh if you are working in anything else than a hobby project, you really want to reach with something like rect hook form lib to work with form and validation.

[@germain1984]

what if we want to have several validation functions run on that useStateWithValidation hook, would we just pass in several functions as args?

[@wkoell]

Your function may contain as many validation rules you could ever need. It is just a function you write to validate specific data or dataset.

[@cristiang4774]

Can you provide a typescript version for useStateWIthValidation please? One that will account for the type of initial value

[@angweiming5647]

Is it possible for you to come up with tutorials for formik and yup for react? I think that would be great for validation.

[@alexdesouza8696]

How do you simultaneously resize the browser and editor windows?

[@AugustoFnrd]

When you have 2 (or more) windows open, you can arrange one of them by dragging it to any side of the screen until a "drag'n'drop" rectangle appears, or using the shortcut "Super + arrow", when the window locks in to place, a second rectangle prompts if you want to fulfill the remaining space with another window. When they are arranged together you can resize both of them by dragging the "connected" side together (english isn't my primary language, sry if it was hard to understand) edit: fix misspell

[@alexdesouza8696]

@@AugustoFnrd thank you so much!

[@CadisDiEtrama000]

Thanks again for the awesome videos! One question though... How can I use one hook multiple times in a single component? For example: const [loading, error, data] = useGeolocation() Do loading, error and data have to be named like that, or can i change their names so I can call it again? const [loading2, errror2, data2] = useGeolocation ()? Or, I also had the same problem if I wanted to use useArray for multiple arrays in that component

[@CadisDiEtrama000]

For anyone else wondering I found the solution for ES6 :) You can change the names of the destructured variables, like so: const [data : newName, loading : newName2, error : newName3] useGeolocation ()

[@AndersGustafsson87]

@@CadisDiEtrama000 you could also change the hook to return array instead of object, [a,b] instead of {a,b}. then you could name them whatever you want. This is why the built in useState returns array not object.

[@CadisDiEtrama000]

@@AndersGustafsson87 Cool :D

[@jfsaraceno9265]

Revolutionize!

[@hndvf]

if you keep this up, soon there will be more custom react hooks than there are stars in the universe

[@bordsUK]

Kyle, can you show a custom hook with callback fn. Most of these hooks only runs during first lifecycle mount. How do we re-call the function with new arguments then re redender it in the component?

[@FrameMuse]

If you mean useCallback hook, there are deps in the second argument, use it to pass new data into a function

[@sleeptil3]

Sometimes you return an object in these hooks and in this case you return an array. What's the difference?

[@TheMikhaylov]

use Formik

[@sushmithareddy4722]

Hey , do you have a react/Redux course? On Udemy? If you don’t already, could you please create one? You explain well.

[@WebDevSimplified]

I have a React course linked in the description but it is not on Udemy

[@jasonmai8695]

Hi Kyle, I love your videos and I would love it and really appreciate it if you can do a peer to peer & multi peer video call, using firebase. This is kinda advance but from your webrtc video, I still can't get it

[@mattmarkus4868]

For the useStateWithValidation hook, if you have say 7 fields that need to be validated, would you use this hook 7 times? Or would you be able to make it work with an object and all the fields on that object so you don't have the hook 7 times in your component?

[@eliamzg]

Valid concern, I had the same problem with a previous hook for binding input, I swapped it for a custom useForm hook that will take the initial state of the form including all the fields and the reducer to change them

[@whoman7930]

can i install these hooks in my project?

[@eliamzg]

According to Kyle you can, I'm using some from the previous videos. This series is pure gold.

[@rishabhanand4270]

where in london did you take me?

[@Ricardoromero4444]

Eslint REALLY doesn't like the `useEffectOnce` hook

[@oncetwice1114]

Learn react hooks by Daniel Bugl

[@CrAzZyKiLleR01]

Sorry but u didn't answered my question on the other video and i am really curios. I ll give it another try: Regarding hook #7 useStateWithHistory: 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?

[@ErlWable]

Thank you so much for all the tutorials. For a second I thought my speed is 1.25x or more.. why go so fast?

[@Arabian_Abomination]

Literally first 😎

[@user-ti9yn8wg6o]

useEffectOnce is basically bad practice

[@sleeptil3]

I honestly have to run your videos on .75 playback speed because you talk so fast. Do you artificially speed it up? lol

[@shabaaz27]

Am second