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.
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.
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
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.
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
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....!
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.
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.
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
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 }) }
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?
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.
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?
@@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'
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?
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?
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
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
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 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.
@@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.
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 RUclips tutorials.
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?
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
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!
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
Great video tutorial. Thanks. It helped me get an understanding of Hooks. I do have a question? In ruclips.net/video/9xhKH43llhU/видео.html you are returning an array in the useForm Hook. Can you also give an example of how you would return an object?
You deserve more subscribers, Ben! You teach really well. Learnt a few things despite initially thinking this was just for beginners Hooks intro!
really awsome
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.
I feel so upgraded after watching this tutorial. Thank you!
i should have totally given this a watch ages ago. thanks Ben your the best!
Much more information in this 15 mins of video than any other useState tutorials in RUclips
You are typing so fast 🤩🥳🥳 and teaching so well. I want to be react developer like you🤩
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.
the best explanations on youtube
I feel like this is peak React/JavaScript. It's so intuitive and clean
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
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.
Please continue this series really enjoy learning from you.
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
Best tutorial I've watched in a long time. I'm gonna guess you're a professional teacher irl haha
actually RUclips is the only place I teach, but I've made a lot of videos to practice
Clear explanation of React useState hook. Thank you very much :)
Man, you're so fast when explaining, I have to pause the video and then think lol. Anyway great content, thanks!
Thanks alot Dude! Was searching for this .. very nice spoken - explained! Please do more!
thanks, this is the rest of the series ruclips.net/p/PLN3n1USn4xlmyw3ebYuZmGp60mcENitdM
so glad I found your channel! amazing tutorials! Subscribed !
welcome :)
Thanks Ben. These series really helps me a lot of time understanding react mind 👍👍👍
Jesus, you make me want to learn VIM just watching you go with the keybindings.
Do it benawad.com/vim
Bro your videos are sick, subscribed.
Ben, you're amazing! Thank you very much.
what a clear explanation man! Thank you!
Awesome series
Thank you, for this playlist about React Hooks. Is Amazing.
Thank you so much for sharing your knowledge. Amazing Tutorials.
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....!
man your tutorials are amazing
thanks :)
Great! Thx Ben.
Wow dude, your content is fantastic!
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.
Thanks.. your manner of explaining is awesome.. keep it up1
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.
Great video man!! I learned so much!! One random question, do you actually type that fast or is it fast forwarded lol
benawad.com/fast
This is great. Thank you so much.
How do you code so freaking fast, almighty Ben?
vim
You rock man, thank you.
Hey Ben, thank you for this wonderful hooks tutorial. Do you know maybe how to write tests for the components which use hooks?
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
Thank you Ben!
Love this channel !
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
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
})
}
Hey! This sounds like a great idea, how would you call it though?
Nvm, I figured it out. Thanks!
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?
Thank you for this
Why use [ ] to close [e.target.name]
const name = "firstName"
{ [name]: "ben" }
is equivalent to
{ "firstName": "ben" }
@@bawad thanks, that's ES6 syntax
just wondering if you ever use formik with the useForm hook. or maybe do you prefer wrapping your forms with the formik component
Awesome
Thanks
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.
Why is e.target.name enclosed between square brackets and not just single or double quotes?
you got my sub
The playlist link in the description is to your Mini Google Docs Clone series.
Absence of setState callback function in useState hook is the biggest fail. It helped me so many times.
Just another one who puts up tons of good material, but unfortunately to busy to answer any questions.
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?
Since the introduction of hooks, is it better to just use functional components compared to the class components?
Thought you were all in on Typescript
I am, but for some beginner stuff, I want to use javascript so it's more accessible
are you aware that web-dev-simplified basically just copied this video? I preferred yours though. Love your shit man.
Thanks Ben! How would you handle the custom state hook in typescript?
I would probably do: gist.github.com/benawad/93f1734ba5771ea53615be6f6fd89721
@@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'
feel free to post the code in my discord, and I'll take a look at it discord.gg/Vehs99V
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?
try
setCount(c=>c+1)
setCount(c=>c+1)
vs
setCount(count+1)
setCount(count+1)
Damn I wish I know this channel earlier
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?
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
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
'useState' is not defined anyone please?
Could you please explain a bit more about why the usage this useStare (useForm) is preferred over using Formik? Thank you :)
I prefer to use formik, just wanted to show how you could build your own
@@bawad Thank you.
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
Yes, but you are using useState in there
@@CynthiaSotoCaballerolYEAHl OK, I was under the impression that hooks can be created only inside components.
How would you do this in React Native? What is the rn alternative for e.target.value ? Thank you!!
Bro you type super fast and move around vs code fast, how do you do that
www.benawad.com/faq/#how-do-you-code-so-fast
I'm pretty sure Ben is a 10x developer ;)
😂
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!!
That's an arrow function, it's like creating a callback on the fly
@@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.
@@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.
Can anybody please explain me the return statement at 13:33?
5:05 I didn't get the side note. Any detailed explaination for it ben? Thanks.
try doing
setCount(count + 1)
setCount(count + 1)
then try
setCount(c => c + 1)
setCount(c => c + 1)
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 RUclips tutorials.
I feel ya
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.
Why are you wanting use them together? Usually I store the form state all of in formik
@@bawad I do the same. I thought i will need to use useState to work with Formik. Apologies for wrong assumption there.
Ben are you using brown switches?
yes
on 7:14 how did u delete that comma without moving cursor ?
vim benawad.com/vim
@@bawad thanks so much
And thanks for the turorial ♡
You made this very simple stuff a complete sham,God help you
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?
onChangeText just gives you the text, so:
(name, text) => setValues({...values, [name]: text })
is this part of a playlist ?
It's the start of one: ruclips.net/p/PLN3n1USn4xlmyw3ebYuZmGp60mcENitdM
Do you use Vim inside VS Code?
yeah
*So sad, you can't use TypeScript with React Hooks...*
You can
lol, why you can't?
@@TruthVideosOnline The purpose of functional component is to write less code.
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
I would probably do gist.github.com/benawad/3d95a0acd4be329afb05cc570ccd545c
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!
basically the functions snapshot the values of the variables when rendered
10:59 oops
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
Have you tried cloning my repo?
no i didnt clone i was just folloeing maybe let me try that. By the way thanks for reply
Great video tutorial. Thanks. It helped me get an understanding of Hooks. I do have a question? In ruclips.net/video/9xhKH43llhU/видео.html you are returning an array in the useForm Hook. Can you also give an example of how you would return an object?
return {
values,
handleChange: e => {}
}