React Hooks useState Tutorial

[@Ko0lHaNDLuKex]

You deserve more subscribers, Ben! You teach really well. Learnt a few things despite initially thinking this was just for beginners Hooks intro!

[@deepakhk9439]

really awsome

[@channel23653]

Thank you for sharing this! takes me 1 hour to understand the custom form hook, how you pass the initial empty object into the final return and what is synthetic event, now seems easy. Totally for this 15 minutes tutorial I spent 4 hours, including a better understanding for the destructuring, spread and ..rest.

[@Justin_Min_001]

I feel so upgraded after watching this tutorial. Thank you!

[@TubeSwarn]

Much more information in this 15 mins of video than any other useState tutorials in KZbin

[@mostinho7]

The useState hook returns two things in an array the state variable and a setter. The setter takes the old value for you to update it 6:50 if using object as state in useState you need to use the spread operator to get the rest of the object properties, if you just return the property you want to update then you’ll erase the other properties the object has

[@bantinggamer4962]

i should have totally given this a watch ages ago. thanks Ben your the best!

[@sathishkumarr7106]

You are typing so fast 🤩🥳🥳 and teaching so well. I want to be react developer like you🤩

[@DevlogBill]

Wow Ben, seen a couple of tutorials on React fairly recently but never seen not one use React the way you had in this video. I was really impressed. Just started React 4 days ago and I have lots to learn. I saved your video, this is a really good video to refer too, thanks for creating it.

[@imanmohamadi2827]

I like the way you teach and talk about the stuff that I expect but is not usually used (like the array definition instead of array destructuring). This helps me connect much more effectively to the content and frees up my mind from having any questions hanging in my mind until the end of the video.

[@zaretix]

I feel like this is peak React/JavaScript. It's so intuitive and clean

[@GL-fc2pv]

the best explanations on youtube

[@stoic2454]

Is there anyone who's like if I see this - "do you wanna be a software engineer..." thing one more time, I'll crack my screen? PS: Gr8 vdo ben as always

[@SomeGamerDudeGuy]

Please continue this series really enjoy learning from you.

[@meganadams7274]

Best tutorial I've watched in a long time. I'm gonna guess you're a professional teacher irl haha

[@bawad]

actually KZbin is the only place I teach, but I've made a lot of videos to practice

[@Meskarts]

Thanks alot Dude! Was searching for this .. very nice spoken - explained! Please do more!

[@bawad]

thanks, this is the rest of the series kzbin.info/aero/PLN3n1USn4xlmyw3ebYuZmGp60mcENitdM

[@21agdmnm]

so glad I found your channel! amazing tutorials! Subscribed !

[@bawad]

welcome :)

[@armanrozika]

Man, you're so fast when explaining, I have to pause the video and then think lol. Anyway great content, thanks!

[@abrahamgarcia2171]

About the lint errors at the beginning of the video, is an internal configuration that came when you create a react app with the create-react-app module. It also includes lint errors for useEffect hooks

[@mudandmoss4132]

Bro your videos are sick, subscribed.

[@func0der]

Clear explanation of React useState hook. Thank you very much :)

[@ansonthedev]

Jesus, you make me want to learn VIM just watching you go with the keybindings.

[@bawad]

Do it benawad.com/vim

[@mfaraz07448]

Hi Ben, you're such a lifesaver man you explain well how to change the state immediately setFindDeals(currentState => ({ SubCategoryID: currentState.SubCategoryID = option.key })) Thanks Man....!

[@gosnooky]

I've always been a huge proponent of OOP, and I still am in most cases, but you can't argue the efficiency of hooks.... I can condense a huge, complicated form into one succinct metho... err, function.

[@thanatos454]

The playlist link in the description is to your Mini Google Docs Clone series.

[@catrosits]

Thanks.. your manner of explaining is awesome.. keep it up1

[@alwinvillero4404]

How do you code so freaking fast, almighty Ben?

[@nachiketkanore]

vim

[@markod3957]

Wow dude, your content is fantastic!

[@KbIPbIL0]

man your tutorials are amazing

[@bawad]

thanks :)

[@pianoby40]

Thanks Ben. These series really helps me a lot of time understanding react mind 👍👍👍

[@jlmonroy13]

what a clear explanation man! Thank you!

[@kukuster]

How do you make something like "delete everything you the right up to the first matching closing parenthesis"? What's the vscode action for this? E.g. starting from 7:55

[@NyKunPikaDasGalaxias]

Ben, you're amazing! Thank you very much.

[@mr.RAND5584]

Thank you so much for sharing your knowledge. Amazing Tutorials.

[@mwnkt]

just wondering if you ever use formik with the useForm hook. or maybe do you prefer wrapping your forms with the formik component

[@nicken86]

Thanks Ben! How would you handle the custom state hook in typescript?

[@bawad]

I would probably do: gist.github.com/benawad/93f1734ba5771ea53615be6f6fd89721

[@larsap]

@@bawad Thanks for the help on moving it over to typescript, but I'm struggling to implement it. I'm still learning typescript and can't seem to type the object properties that are returned to a string or number. Anyway you can show how to use the function? Error with example pass of property firstName: Property 'firstName' does not exist on type '(e: any) => void'

[@bawad]

feel free to post the code in my discord, and I'll take a look at it discord.gg/Vehs99V

[@yehoshualeventhal5078]

hey great stuff ben. If anyone would like to know how to clear the form with the useForm hook, you can just return a 3rd function with the hook that looks like this () => { setValues( { ...initialState }) }

[@Frazful]

Hey! This sounds like a great idea, how would you call it though?

[@Frazful]

Nvm, I figured it out. Thanks!

[@leonardocamargo5412]

Thank you, for this playlist about React Hooks. Is Amazing.

[@mandiprai8593]

Since the introduction of hooks, is it better to just use functional components compared to the class components?

[@tkousek1]

This is great. Thank you so much.

[@olegnamedia2355]

Why is e.target.name enclosed between square brackets and not just single or double quotes?

[@svetozarradic9667]

Hey Ben, thank you for this wonderful hooks tutorial. Do you know maybe how to write tests for the components which use hooks?

[@juancamiloq1]

Awesome series

[@HeroesOfAesthetics]

Great video man!! I learned so much!! One random question, do you actually type that fast or is it fast forwarded lol

[@bawad]

benawad.com/fast

[@jessekrim]

How would you do this in React Native? What is the rn alternative for e.target.value ? Thank you!!

[@harshwardhanjethania]

I like your videos and the way you explain the things, I would like you to create a video explaining how to get the updated state values just after setting them, as callback is not allowed in useState hook.

[@Malcolm777-i]

Love this channel !

[@DevlogBill]

Hi Ben, I'm a super newbie. Question? Why were classes replaced with hooks? I am enjoying hooks and classes look more complex. But I am pretty sure there is another reason why classes were replaced for hooks, why were hooks introduced and classes replaced?

[@rameshthati7999]

Hi Ben, I like way of your presentation. I have one small request, if it possible can you please share some session about react testing

[@danieljing9319]

Why use [ ] to close [e.target.name]

[@bawad]

const name = "firstName" { [name]: "ben" } is equivalent to { "firstName": "ben" }

[@danieljing9319]

@@bawad thanks, that's ES6 syntax

[@yangwang24]

Hi Ben, thanks for your video. Just one quick question here: If I put "const [count, setCount] = React.useState(expensiveInitialState);" which is also working. May i know which one is correct?

[@nirmalpatel29]

Hello, I have one doubt. Why the count takes two clicks to increment a count. Here's the onClick event. setCount(count++)}>+. I know I did " count ++ " If the initial count is 10, when I click on the + button it should increase the value of count. But the state doesn't change on the first click. Why so?

[@mongonode6755]

Can anybody please explain me the return statement at 13:33?

[@ibrahimalshubaily9520]

Great! Thx Ben.

[@abhim6380]

The "values" (values.email etc) changes every time state changes though you're assigning only once when calling useForm. How? useForm is a simple function that returns an array. Does values get updated every time you call setValue. Is the useForm function called again with new values set to initialValues or something like that? It's so confusing

[@jacksmith870]

5:05 I didn't get the side note. Any detailed explaination for it ben? Thanks.

[@bawad]

try doing setCount(count + 1) setCount(count + 1) then try setCount(c => c + 1) setCount(c => c + 1)

[@iamkiko5046]

You rock man, thank you.

[@salemouail627]

on 7:14 how did u delete that comma without moving cursor ?

[@bawad]

vim benawad.com/vim

[@salemouail627]

@@bawad thanks so much And thanks for the turorial ♡

[@dayashankartr]

Hi Ben. Thanks for the video. I had a question: Why did you use setCount(c=>c+1) instead of setCount(count+1)? As each variable has its own updater function, can you give an example of when the state override issue (which used to happen with setState) might happen when using useState?

[@bawad]

try setCount(c=>c+1) setCount(c=>c+1) vs setCount(count+1) setCount(count+1)

[@sushilbansalk]

Hi Ben, do you have example of useState with Formik using TS? i am using Formik in my project and was thinking of refactoring the code.

[@bawad]

Why are you wanting use them together? Usually I store the form state all of in formik

[@sushilbansalk]

@@bawad I do the same. I thought i will need to use useState to work with Formik. Apologies for wrong assumption there.

[@CrusaderMen]

Thank you Ben!

[@robertshawnmitchell]

Thought you were all in on Typescript

[@bawad]

I am, but for some beginner stuff, I want to use javascript so it's more accessible

[@jamols09]

is useState really necessary for handling inputs like username, password, email ? What's the most preferred way? I just want to keep it simple not like this one.

[@gevikb]

Could you please explain a bit more about why the usage this useStare (useForm) is preferred over using Formik? Thank you :)

[@bawad]

I prefer to use formik, just wanted to show how you could build your own

[@gevikb]

@@bawad Thank you.

[@newrind]

Ben are you using brown switches?

[@bawad]

yes

[@rajdeepchandra9807]

If i want to use this hook for react native text input with onChangeText i get e.target as undefined. any idea on how can i achieve this with React Native?

[@bawad]

onChangeText just gives you the text, so: (name, text) => setValues({...values, [name]: text })

[@SahraClayton]

Bro you type super fast and move around vs code fast, how do you do that

[@bawad]

www.benawad.com/faq/#how-do-you-code-so-fast

[@AmanNidhi]

is this part of a playlist ?

[@bawad]

It's the start of one: kzbin.info/aero/PLN3n1USn4xlmyw3ebYuZmGp60mcENitdM

[@abhim6380]

I don't understand why app.js is re rendered when the state changes in the useform file. You are simply returning an object in useform

[@CynthiaSotoCaballerolYEAHl]

Yes, but you are using useState in there

[@abhim6380]

@@CynthiaSotoCaballerolYEAHl OK, I was under the impression that hooks can be created only inside components.

[@barryfulk6820]

I'm pretty sure Ben is a 10x developer ;)

[@bawad]

😂

[@nguyenchau7107]

Damn I wish I know this channel earlier

[@toponthelist9154]

Do you use Vim inside VS Code?

[@bawad]

yeah

[@ekbergpeter6987]

Just another one who puts up tons of good material, but unfortunately to busy to answer any questions.

[@vvchernyshenko]

Absence of setState callback function in useState hook is the biggest fail. It helped me so many times.

[@abbisalmi1948]

Thank you for this

[@danianiazi8229]

'useState' is not defined anyone please?

[@pepepomada4664]

How you can access the event (e) inside handleChange hook if you didn't pass it with a callback like so: (e) => handleChange(e) How this work and how that javascript (or general programming) feature is called so I can search for it? By the way awesome tutorial!!

[@bawad]

That's an arrow function, it's like creating a callback on the fly

[@pepepomada4664]

@@bawad Yes, I understand that. But in the video at 12:50 you return a function as the second value of an array from useForm hook . That function takes a parameter "e" (the event from onClick): e => { setValues({ ...values, [e.target.name]: e.target.value } ); } The problem is that you never pass the argument "e" as a parameter. At 13:14 you change the arrow function that does pass the a parameter "e" for just the name of the function "handleChange" without parameters.

[@pepepomada4664]

@@bawad Ok forget it. It is because I thought that onclick have to be passed a function with parenthesis or a arrow function but now reading the documentation clearly shows that you can pass the name of a function or a function expression like in this case.

[@khamhti5223]

Thanks

[@saadbaig3060]

you got my sub

[@necbottz]

i fail to set custom hook as explained. i fall exact what your teaching and i real understand but i get this error TypeError: Invalid attempt to destructure non-iterable instance

[@bawad]

Have you tried cloning my repo?

[@necbottz]

no i didnt clone i was just folloeing maybe let me try that. By the way thanks for reply

[@backtoislam610]

Awesome

[@trueMatthewkirkham]

are you aware that web-dev-simplified basically just copied this video? I preferred yours though. Love your shit man.

[@dimitarvel1441]

This is why I dropped angular. When they changed the entire fucking way of writing angular (years ago) and even removed backwards compatibility I was so pissed that I wrote a 3 pages complaint and sent it to their dev team members. Now the same thing is happening in react. Why do they have to do this? If it works, let it be. Not like we are seeing some major improvements in performance, it's stupid. The thing is that we have to think about react in a new way now. And I just learnt the framework about 8 months ago... The thing is, developers don't want frameworks to be easy, they want them to be efficient and consistent. If they kill backwards compatible in going to quit web development for good. It's been too fucking long trying to keep up because companies can't accept the fact that they can't make a framework that is easy, fast and efficient. If any collage student with half a month of experience in javascipt is able to pick up something like angular, then where does my fucking 6 years experience go? Down the fucking drain, that's where it fucking goes. And not to mention that the documentation on the react website is garbage so I have to watch KZbin tutorials.

[@bawad]

I feel ya

[@jexxiewoo8390]

Could you explain more why "Function components capture the rendered values. With Hooks, the same principle applies to state as well." in this bit.ly/2Hh4qQw? Thanks!

[@bawad]

basically the functions snapshot the values of the variables when rendered

[@keepforever726]

How would you go about clearing the fields after, say, a submit? I accomplished it by returning an additional function in the useForm array that I pull out as "clearForm": github.com/keepforever/use-ctx-mem-rdcr-6-22-19/blob/5e4863dd6f530737ad807d3ef81e581df8d9082f/src/hooks/useFormQuestion.js#L15 Or would you recommend another strategy? Also, what about yet another method on the custom hook that fetches (async) data? Bad practice or fair game for the right situation? github.com/keepforever/use-ctx-mem-rdcr-6-22-19/blob/5e4863dd6f530737ad807d3ef81e581df8d9082f/src/hooks/useFormQuestion.js#L27

[@bawad]

I would probably do gist.github.com/benawad/3d95a0acd4be329afb05cc570ccd545c

[@5ervanttechintel_github_io979]

*So sad, you can't use TypeScript with React Hooks...*

[@bawad]

You can

[@vldblc9350]

lol, why you can't?

[@5ervanttechintel_github_io979]

@@TruthVideosOnline The purpose of functional component is to write less code.

[@davidfromnorth7836]

10:59 oops

[@johnnwabuforudemezue1108]

You made this very simple stuff a complete sham,God help you

[@alexsilny5748]

Great video tutorial. Thanks. It helped me get an understanding of Hooks. I do have a question? In kzbin.info/www/bejne/b6nLfHtqaNGfnrc you are returning an array in the useForm Hook. Can you also give an example of how you would return an object?

[@bawad]

return { values, handleChange: e => {} }