React Hooks Tutorial – 1 – Introduction
- December 23, 2023
- Posted by: MainInstructor
- Category: Go JavaScript React
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2023/12/1703299554_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: React Hooks Tutorial – 1 – Introduction
Hey guys my name is vishwas and welcome to a brand new series on react hugs in this introductory video we will talk about the wat and vibe of react hooks and in the rest of the series we will dive deeper into the world of react hugs
Before we begin I just want to tell you that I am assuming you know the basics of react you don’t have to be an expert by any means but the very basics of react like functional components class components props and state are all required to get the most out of the
Series if you are a complete beginner I highly recommend you go to the react for beginner series on my channel before you continue I have covered in detail all the fundamental concepts in react I would also recommend watching the beginners series completely and then start learning about hugs as it is going
To make it so much easier for you to understand the motivation behind hooks with that in mind let’s begin what are hooks in react hooks are a new feature addition in react version 16.8 which allows you to use react features without having to write a class for example a react components state
Previously you could use state only within class components with hooks it is now possible to use State and also other react features without writing a class what you should keep in mind is that hooks don’t work inside classes they let you use react without classes alright
Now that we know hooks are a feature to use other react features without using a class let us understand the motivation for hooks why did the react team feel that there was a necessity for a feature like hooks this is also the place where your knowledge of react fundamentals and
Experience creating react apps will help you better relate to the different reasons the first reason is more related to JavaScript than react itself to work with classes you have to understand how this keyword works in JavaScript which is very different from how it works in most other languages people can understand
Probs state and unidirectional data flow but will struggle to implement class components you also have to remember to bind event handlers in class components on the react side it is also observed that classes don’t minify very well and make hot reloading very unreliable with hopes since you are not working with
Classes anymore you will not have to face these problems let’s take a look at the second reason this reason kind of touches on the advanced topics in react such as higher-order components and the render prompts pattern having worked with react you would have learned that there is no particular way to reuse
Stateful component logic between components the HSE and render profs patterns do address this problem but you would have to restructure your components which kind of results in awkward looking code you end up wrapping your components with several other components to share the functionality this only makes the code harder to
Follow so there is a need to share stateful logic in a better way hooks help us in this aspect by allowing us to reuse stateful logic without changing your component hierarchy the final reason is to do with how code is placed in a component and the fact that complex components become hard to
Understand when you’ve had to create components for complex scenarios such as data fetching and subscribing to events you would have realized that the related code is not organized in one place but scattered across different life cycle methods for example data fetching is usually done in component did mount and
Sometimes also in component did update if you have to set event listeners you set them up in component did mount and unsubscribe in component will unmount as you can see related code which is data fetching is split between component did mount and component did update code for event listeners again is in different
Methods component did mount and component will unmount completely unrelated code on the other hand that is data fetching and event listeners end up in the same code block that is both of them end up in component did mount and because of the stateful logic in many cases it’s not possible to break this
Components into smaller ones it would be so much better if all the related code was together this is another problem hooks solve rather than forcing a split based on lifecycle methods hooks let you split one component into smaller functions based on what pieces are related so these reasons are the motivation behind
Hooks alright now let me also mention a few noteworthy points to be able to use hooks you have to use react version sixteen point eight or higher but the best part is that hooks are completely opt-in you don’t have to learn or use hooks if you don’t want to hooks don’t
Contain any breaking changes and the release is hundred percent backwards compatible the react team also does not have any plans of removing classes from react you can continue to use classes and gradually start rewriting them with hooks if it is simple and you feel confident you can’t use hooks inside a class
Component but your app can definitely mix classes and functional components with hooks the bottom line is hooks don’t replace your existing knowledge of react concepts instead hooks provide a more direct API to the react concepts you already know such as props state context refs and life cycle before winding up this introduction let’s
Quickly take a look at the summary hooks are a new feature addition in reactivation 16.8 they allow you to use react features without having to write a class there are three important reasons for the introduction of hooks by not having to use classes hooks avoid the whole confusion with this keyword since
Hooks don’t need a class react components will also minify better the second reason is that hooks I love you to reuse stateful logic without changing your component hierarchy you can avoid advanced react patterns to a great extent which makes the code much simpler to follow the final reason is that hooks
Let us organize the logic inside a component into reusable isolated units mutually related code can be put together which will avoid trivial bugs and inconsistencies now that we have a solid understanding about the what and why of hooks let’s start with our very first hook in the next video thank you
Guys for watching don’t first one
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
This series holds good in 2022. Please watch it without any hesitation 🙂
I hope hooks are still valid now .. Please let me know . As am learning it now .
Pls add useTransition() hook
Thanks!
a) I am staring to learn react I know a little bit about it. If I learn this react hooks course and don't learn about the classes in react is that a problem.
b) what should i learn after it redux or redux toolkit.
c) Does this course still stand on its own like in 2023 October if I start learning it or should I choose some other updated course.
d) IS there a project that you teach which after learning about react I may start practicing.
I would be great full if you can answer these questions. I am a Django backend developer I want to integrate my front end with react. so that's the reason for asking so many questions.
If you can guide me as well that would also be highly appreciated.
Here i come from now!!!!
try uploading your PPT to the drive and share the link with us it will be very useful
Can anyone please explain me the meaning of this point:
"classes dont minify very well and make hot reloading very unreliable"
Could you please add a PPT of the same? Thanks.
Good Explanation!
BTW there is a typo @3:42 "There is need a to share …" should be "There is a need to share …"
2023 and still enjoy it
Thanks
Please start a react basic fundamentals series in details and also hooks .
Great tutorial 🙏
start
If you’re deciding whether to do this older Hooks course, my input (11/22/2022): I strongly recommend this course over any of the other React Hooks tutorial videos!
– basic Hooks concepts are very thoroughly and completely covered, in detail.
– the example code is simple and well-structured, making it easier to follow than most examples.
– the practice of entering the examples, which include many JavaScript/React patterns, is very valuable.
– Vishwas is an excellent teacher.
A few minor (React?) things have changed causing code to react differently from the video (the useEffect return is one). And the coverage of the older class structures is (at first) annoying for newbies that never intend to use them, but skimming that presentation helps understand what the Hook function is doing.
I just finished the course (11/26/2022) and double-down on my recommendation: Vishwas' teaching methods and in-depth explanations make him (by far) the best teach I've found on-line!
I completed this series in 1 day, Very easy to understand now I am confident with React Hooks.
{2022-10-14}
Am about to learn this series now
It very very best playlist for React Hook. Please all React developer must to see complete playlist of Hook. Very best explanation with example. Hats off to Codevolution for making best content. Thank You.
Your explanation is superb man.
Superb…🔥
Good explaining and easy to understand about HOOK.
hooks are such a blessing. class component is so pathetic and awful.🧡
Are this new section related to reactjs tutorial??
When In doubt I get back to your tutorial to brush up my hooks concepts here…Your tutorials have been of great help in getting a good understanding of React Hooks. Precise and clear explanation. Thanks for putting this up.
Hlo sir i am facing problem initializing JS/TS language features take one hour and server is not starting please help
U r awesome sir 🙂
I am a react developer. And I still come to these videos whenever I come across any issue. Apparently, this guy has covered a lot of scenarios you might encounter when working as a React Developer/learning React.
This series is way better than any udemy course.
Also, self learning should be continued if you want to master the tool.
Where to learn state in React and stuffs like componentDidMount()
Thanks for these videos.
Thank you..
Knowledge with deep understanding and Joy!
Thanks u so much.
great one to look and understand concepts…
Well Explain
Thank you. This is a really good tutorial to fill the knowledge gaps in react hooks