Introducing React Hooks

In this video we will look at the new "hooks" feature proposal in React 16.7, specifically the useState hook which allows us to store state in a functional component. We will also build a small todo app
Sponsor: brilliant.org/TraversyMedia
First 200 students get 20% off!
Scotch.io Article:
scotch.io/tutorials/build-a-r...
💖 Become a Patron: Show support & get perks!
/ traversymedia
Website & Udemy Courses
www.traversymedia.com
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia

[@OMorningStar]

Thanks for the useState explanation in the beginning it made a whole lot of sense by comparing it to this.state={}, and the setState() which manipulates the state. I just finished learning React components so the timing is perfect for me. I 💘 React, thanks again.

[@iamlisaross]

Omg it’s like awesome inception - traversy + scotch in one place! :) great overview of the hooks. Thanks for taking the time to put this together.

[@patrickcole1119]

Outstanding tutorial on hooks! Thanks for providing a getting started with create-react-app in mind.

[@eslachance]

Oh good. I love this tutorial. The ones I've seen sort of limited their entire process to one component so I wasn't "getting" how to pass state and functions between the main component and subcomponents. Brilliant, thanks a lot!

[@raekwonthachef]

Even though I've used React Hooks a decent amount: I still found this super useful to follow. Thanks Brad!

[@k2bodysculptingllc821]

This was a great tutorial. I did a todo list in vanilla js and it took me 2 days to complete, I'm also new to coding, but this was so much easier and far more fun to undertake. Thanks for all the content you make I'm growing leaps and bounds from it. Hope to be in my first dev position later this year when I'm done with my Bootcamp program. till then I will be using thee to build foundational skills and knowledge in my free time. Thanks again

[@aleksanderorowski963]

hi there! How did it go? Are you dev now? :)

[@shobhitsrivastava4496]

I am watching this tutorial on 31st Dec of 2020 trying to end this year by learning something useful... and the quality content in this video is very well justifying that!! thank you sir for this!!

[@Ryan8ful]

Great video as always! Thanks for everything you do Brad!

[@jame_sta]

you the man brad, love your videos and courses! keep it coming :D

[@benardnguyo6817]

Brad: Makes awesome tutorial. Everyone in the comments: Talks about the 'nobody important call'. Brad: ......Bruh.........

[@mikelautensack7351]

These crash course are excellent! You cram so much into into an hr or 2 … perfect place to start when studying a new topic.

[@prafullaraichurkar4369]

This is one of the cleanest code tutorial i have ever seen.

[@ryannewendyke6009]

Welcome to Traversy Media, Brad is bar-none

[@misterjaypeasmith]

All his videos are super clean 🙌🏽

[@vivekvitthalraopatil2775]

It's cleaner than my bank account

[@iamkakarotsaiyan3918]

@@vivekvitthalraopatil2775 hahaha

[@IanMarkind]

Great content as always, keep them coming!

[@MarkusEicher70]

Thank you. This was very helpful to me. I will work on recreacting this from scratch as good learning project. Very good work, thanks!

[@hassantariq8847]

Fantastic Tutorial related to REACT JS - LIFE CYCLE Hooks.

[@brandontheturner83]

I really enjoyed this video, thank you!

[@mashrukul]

Incredible as always, Thank you sir

[@deivids47]

Thanks, really good explanation.

[@amymarais4909]

This was so helpful and simple. Thanks Brad!

[@josevelez7994]

Dude your videos are SO helpful!

[@TheDorac1]

Love your react stuff!

[@quinn479]

Thanks for the videos! My goal is to sound like you in my next job interview.

[@GmoneyMozart]

Nice bro. I’ve been looking to get into this.

[@erikecoologic]

The final code isn't too neat, but the explanation is very clear and got me going right away. Very well worth a thumb up.

[@BrianDriesenga]

Nice work as always Brad. Thanks!

[@rafaelfez]

Thanks Brad! Now I understand how to use

[@Roshambo3]

Wonderful tutorial thanks!

[@benjaminhaynes2012]

Hero :) saved me some reading. Great vid!

[@zacglasgow]

So much quality being churned out lately!!

[@dmcshehan]

Thanks for the video! Really cool!

[@MatejMachac]

Dismisses a call with "Nobody important"... Next video: Story time: Why am I divorced...

[@kayan_dev]

😂😂😂

[@PeteStMartin]

Awesome! Thank you so much!

[@MultiNekta]

"Nobody important" - an anthem of the introvert Programmer's lol :DDD

[@alisherwhite4616]

all good programmers are introverts

[@typicalprogrammer3542]

@@alisherwhite4616 almost all

[@Kawasakifanboy]

@@alisherwhite4616 Speak for yourself :)

[@alisherwhite4616]

Hirak Chowdhury i am pretty sure i am right

[@Devesteter252101]

@@alisherwhite4616 damn, you've assessed every single good programmer in the world and concluded that they are all introverted? impressive we can calculate the probability of this being true. around 20% of the population are introverted, and according to google there are around 500k comp sci grads each year. if we assume 10% of comp sci grads are 'good' at programming, then we have 50k good programmers each year. since the probability of being introverted is 0.2, we can assess the probability that all 50k programmers are introverted 0.2 ^ 50,000 = 10^-35000 thats 0.000000...1 with 35,000 zeros. it's pretty unlikely that all good programmers are introverted.

[@brucetargaryen7150]

Damn Savage. "Nobody important"

[@boulerice-archives]

😲

[@TVSanus]

Probably some carrot farmer?

[@SergioArroyoSailing]

great tutorial! basically, you evolved your last Todo example using prop drilling :) nice! :D

[@AbhishekKumar-mq1tt]

Thank u for this awesome video

[@guilhermegirardi]

Thanks a million, Brad!

[@a_maxed_out_handle_of_30_chars]

Please do a PostgreSQL video.

[@Axel_Roffi]

Great tuto as always: few questions though, 1) Why don't you use arrow function const App =()=>{} instead of function App(){}? Can it be done with arrow functions (did not try it yetas I am following your tuto)? 2) how would you handle states between components (i.e. we have a Todo.js component) would you use context or redux? 3) Do you think with Hooks and Context, class and redux will be less used...? Keep up the great job.

[@devilmanscott]

No-one answered so I'll try. 1)You could use a arrow function, but the older way still has a slight improvement in memory management because it becomes a reference to a pointer, while the arrow function in re-created every time increasing the cost to memory though it relatively small and only an issue in larger applications, for the most part it's preference. 2)You could use either, there's even more like Apollo or Mobx, but you could do it with context, which there are already hooks, also it comes with it own little mini version of redux, though it mostly for handling data in that component. 3)I could give you a couple of reasons, but here's one of the guys who works on it - medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889

[@user-ni5kz3je2s]

Great course. Thank`s. hello from Armenia

[@aichaabdelali2244]

Hey loved the video very helpfull, thanks!! I didn't really get why you used the .splice for removing todos, I thought the .filter would be the appropriate method, can you explain to me how the .splice would work in that situation ?

[@XSnipersArmyX]

Brad when you will update the React course?

[@blasttrash]

7:35 why did u not answer my call brad? why?

[@ShlokWalia]

I guess because you are "nobody important" :p

[@diogoaraujo94]

@@ShlokWalia lol, u made my day xD

[@carlosbane147]

Nice work sir, i really appreciate what you're doing. Please can you make a video on registration and login functionality for a MERN Stack app. Thanks :)

[@MajorBreakfast]

Great explanation! Spotted a tiny mistake: Your completeTodos function unintentionally mutates the todo object. [...todos] creates just a shallow copy, it doesn't copy the todo object that you want to modify.

[@phanirithvij]

Great video. I have a small doubt, What is the advantage of using hooks instead of classes?

[@crthegreat1]

it is explained very well in this video kzbin.info/www/bejne/mqHaanh-ec1lmK8

[@DanAbramov8]

I wrote a bit here. medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889

[@vikrantsingh47]

@@DanAbramov8 why not add routing and redux to the the core react framework? most large companies use angular only because angular is a complete framework, otherwise everyone would use react

[@cristianocolangelo9920]

@@vikrantsingh47 React is a complete framework I don't understand why can't companies just use libraries like usual, by now react router and redux are very established.

[@adace1]

Please make a styled components tutorial. Thanks

[@benmitchinson9831]

If you could do springs next that would be amazing!

[@akinlekan28]

Brad can you please make another tutorial video on using Redux with hooks.

[@vijaykumar-rs7hs]

Cool new feature 👍

[@sakinemazlomyar2543]

As always great!

[@mahkamehfallah8321]

thank u for your explanation, i need source code ,where can i find it?

[@nashrampy]

Did you just read my mind, was waiting for this and i got a push notification on hooks. Big Thanks!

[@TraversyMedia]

No problem :)

[@yichizhang5707]

Great tutorial Brad

[@MylesGmail]

thx i tweeted this

[@matthewrosenberg949]

Two questions: 1. If props were no being restructured, how would they be referenced? 2. How would props be passed around if we were using router or multi page components?

[@SmartWizzard]

Any plans on updating react front to back course to latest in packtpub?

[@rusnickk]

I am not sure, but in method completeTodo we should copy not only array but an object which is modified?

[@BGivo]

I read that it's recommended to use array higher order methods to update arrays as opposed to the way he calls splice or index directly. Is it actually just a matter of preference or are there performance implications?

[@argeelearner3978]

Can you update your React Native installation and/or make a series on React Native?

[@CodeGoblin]

Managed to split it into components but the app.js can feel a bit heavy still holding all of the state and actions, is there a way to split those up into their files and bind them to the app.js?

[@skverskk]

Well done

[@dimitrisefstathiadis6562]

Can you create a documentation website like redux with either Gatsby or Vuepress please.... Great work btw... thanks...

[@aymensekhri2133]

thanks a lot !

[@laser1915]

My KZbin screen in dark mode and your editor on dark mode ...looks so cool

[@lucasmerat9522]

Love that you're diving right into how to use them, but maybe you could spend more than the first 45 seconds explaining what a hook is? Would be cool if during the tutorial instead of just blazing through creating a todo app you connected this with how it's being done with a hook vs. class based component

[@janphillipjuntado5340]

Pink panther approves Jokes aside, it's a very great tutorial! I now want to implement hooks in my react apps because of you. Thanks.

[@DjSeymur]

How can I have that color scheme ? Looks so nice

[@arthurprather6720]

Thank you Brad for sharing. For toggling on completion on todos, if anyone is interested... const completeTodo = index => { todos[index].isCompleted = !todos[index].isCompleted; setTodos(todos); }

[@stannone7272]

This approach mutates the object(todo) value. Be careful!

[@naughtrussel5787]

@@stannone7272, the approach in video mutates as well.

[@abdullahseba4375]

What exactly is the difference between hooks and redux? Does it mean I don't need redux anymore? Love your vids :).

[@zackoncode1261]

is there any reason why you are not creating those other component as a seperate file? or is that hooks supposed to work? creating components inside a component

[@sagarpateliya1867]

This is good!

[@nikosspiropoulos8417]

could someone explain where the index value comes from? when did we initialize it exactly? thanks in advance!!!!

[@wilhelmpaulm]

when you create the *Todo* list, you pass the key={index}, index={index}, todo={todo} the index values are the default index values from your *todos* array: [ 0: {text: learn..., 1: {meet..., 2: build... ]

[@naughtrussel5787]

array destructuring like once done in "add.." or "completeTodo" is generally helpful with thought of immutability in mind, and works with primitive data types, but gives no benefits while working with arrays of objects, since they are stored as links and when "newTodos[n].isCompleted = true" is invoked, the original todos[n] supposed to be changed. PLEASE, correct me if i'm wrong and react hook makes some sort of deep copy on the backstage or smth.

[@longingheart77]

Would you make some Vue & Laravel stuff ?

[@chaoruqin8597]

awesome video

[@joelomoglio1125]

Why does create-react-app 16.8 no longer create App as a class component? Are classes being dropped now that hooks are available?

[@exactzero]

There are no plans to remove classes from React, don't worry. "Completely opt-in. You can try Hooks in a few components without rewriting any existing code. But you don’t have to learn or use Hooks right now if you don’t want to." reactjs.org/docs/hooks-intro.html#gradual-adoption-strategy

[@netsaosa4973]

im hooked

[@sorover111]

What is going on at around the 4min mark when he destructures [todos, setTodos] out of useState using array-type braces instead of what I'm used to seeing curly-braces .. I've seen this a couple of other places when the destructuring doesn't seem to be on an array (like in this case) .. Can someone let me know?

[@vladislavbarbarii2089]

I see video from Brad I press like

[@johndoyle3816]

Is there performance benefits from using hooks? It seems as though it makes the code less readable and overall worsens the developer experience with functions everywhere. Class components seem much easier to read, write and debug in long term, that's of course just my opinion. I'd love to hear from devs who've built bigger apps with hooks. What are some examples where using hooks over class is better?

[@areola_ayatollah]

What is this drama? Wondering the same. All this choice in approach is starting to piss me off.

[@joelomoglio1125]

I completely agree classes are much cleaner and easier to read and organize. I thought the benefit of ES6 was being able to use classes and now everything is going back to functions - WTF???

[@CunnyFuntDannyB]

There is no argument where 'using hooks over a class is better', it just gives us individual developers the choice as to whether or not we want to implement a class for each and every component that needs to access state. Classes are fine, but once an application grows, you may want to reuse the same component lifecycle methods between components without copying and pasting code. React hooks allow you to do this, as well as making it easier for others to understand should they come across your code.

[@loia5tqd001]

No I see function hooks style is easier to read man. Even though I came from the land of C++/C# classes language. As I reading more about functional programming, I see it’s obviously awesome.

[@AkhilSharmaTech]

hey, hope this helps ->i have built a bigger app using hook. bottomline- in the long run, code is easier to manage, you can be very modular

[@PaulBrownclk-me]

What's the advantage of using hooks with functions, over using normal state etc with classes?

[@Jenergyyy]

Was thinking the same exact thing! Hope we get an answer.

[@IlemonaJamesAtuluku]

First to view... Much luv brad

[@jankidepala]

how did u get this heart

[@JewJitsu1]

is there a way to add the date the todo was created? or show a description of the todo? Im brand new to all of this sorry for the dumb question

[@stefensuhat6716]

can useState hold more than 1 state?

[@Chocoholic1337]

Probably a stupid question, but why are we using the brackets to destructure todos and setTodos from useState()? I haven't seen that syntax before - I thought destructuring is always done with curly braces. Thank you for the video btw!

[@andy_lamax]

If you are destructuring from an object you use the curly braces, the square brackets simple shows that we are destructuring from an array and not an object. although an Array is already a js object

[@tonkihonks3430]

Why the const MyFunc = ( ) => {...} if we don't need to be binding *this* here? could we just write in a plain ol js function myFunc() {.....}?

[@CunnyFuntDannyB]

there is no difference. They are both functions.

[@MrMiguelapb35]

Thanks Brad

[@darshitgajjar5199]

Good video

[@francescoscollo2275]

Hi . Could you explain better the connection between the function call addTodo inside the TodoForm and addTodo inside the App? Thanks . Bye

[@asdfkerub]

i just discovered this react hooks. Should I be converting my projects to use React Hooks? How well does React Hooks scale to a big React/redux project?

[@kaizoey]

they dont recommend rewriting all your components just for the sake of using hooks. They can be used alongside your existing classes and they arent planing to remove classes.

[@sarahmattar]

Love this. I think I find Hooks a bit easier than the traditional this.setState({}). The next question is, how do Hooks figure into Redux?

[@mattmarkus4868]

Where would you make your api call, in UseState or somewhere else - now that we don’t use classes and componentDidMount() ?

[@omgitzanarwhal]

a useEffect hook

[@vinikett9114]

why are we not using the push method to add the new todo to the todos array...also how can we render the todos array dynamically in the intial state itself,instead of rendering the hardcoded todos value?

[@cod-newbie9166]

Does that mean that you can get more than one state using this method?

[@jacobgadikian5941]

What are you using to color your parenthesis and such? Mine are not as gorgeous as yours.

[@stabMyFaceOff]

Good example, thanks for the explanation. But functions for all components seems like a bad idea, also declaring functions inside functions feels bad. Would be nice to extract complex logic for reuse with a hook, think I heard it was possible. would love an example of that. Thanks

[@alexkey9372]

are hooks better in performance than class based components?

[@bradthegringo]

Didn't have an actual submit button on the AddTodo form. He simply hits "ENTER" on the form in the UI, and it fires the onSubmit function. Is this a functionality of jsx input, or does it have to do with react?

[@hmodarres]

why is it a good idea to replace neat syntax of classes with stuffing everything into single functions?

[@Lornahh]

Hooks solve many problems. The 'this' keyword in React (or really Javascript in general) is hard to understand and utiliize, and shows up when requiring binding. The props constructor is also required, and also requires us to super those props to use the weird 'this' in our code. Classes are hard for the compiler to interpret, functions are easier for humans and machines alike to understand, making functional components much faster. Hooks also make life easier when reading and writing code. For example, context is quite difficult to manage with only class components, and the useContext hook makes things much easier and much more readable.

[@hmodarres]

@@Lornahh Your argument is based on assumptions that are simply untrue, 'this' or 'self' is not hard to understand and it is in fact one of the first concepts OO programmers learn. Same with "The props constructor is also required, and also requires us to super those props to use the weird 'this' in our code." I'm still puzzled as how hooks help

[@Lornahh]

@@hmodarres simplifications. of course YOU understand the this keyword, but it's so different than any other language that it might be hard for others. there's a reason they're not required. Noone is or will ever force you to write with hooks, you can keep the class structure if you prefer. hooks just make writing components that change state (especially down the tree with it's much simpler useContext) easier for humans and machines to understand

[@hmodarres]

@@Lornahh Mm that makes sense. I hope they dont deperecate classes in the future as you say. cheers

[@Lornahh]

@@hmodarres Noone would benefit from that at all. noone benefits from feature removal haha. I would also very much agree, classes and hooks should work alongside each other and react emphasizes that. cheers