React is a javascript library that we can use to quickly spin up beautiful apps in less amount of time.
For more detailed information about react I will be providing some links at the bottom of this blog.
But I’m writing with the assumption that you have some basic knowledge of React.
When I first started using React to build a project, all through-out my search I kept coming across this concept of hooks. Youtube videos, Stack Overflow google searches, articles, you name it. I kept coming across this word …hooks. I ignored it at the time because of a few reasons:
1.) I was on a time crunch to build my final project for bootcamp(No time for detours
2.) React at the time was new enough and I didn’t think learning hooks was worth it.
3.)
After my assessment for my final project(which I passed! ) my assessment technical lead asked me if I wanted to learn how to use hooks to make my life a little bit easier.
I figured what the heck, why not. I can breathe a bit more know that the hard stuff is over.
And what she showed me blew my mind. (Which is what I’m going to share with you.
Ever since then, when building apps with React I always looks for opportunities to uses them.
Needless to say…..I’m hooked!
🤓
Sooooo what are hooks exactly???????
Well according to Reactjs.org:
“Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.”
“Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes — they let you use React without classes. (We don’t recommend rewriting your existing components overnight but you can start using Hooks in the new ones if you’d like.)”
In order to appreciate hooks, one must understand class components and classless (functional)components. Here are a few differences between the two:
Functional Components
-Commonly known as stateless functions
-They don’t have a render method
-Can be defines using arrow functions or created with function keyword
-The take props as arguments
-They use the return method
-Has no lifecycle method
Class Components
-Also known a stateful components-
-It must have a render method
-When props get passed to a class components, we access them using this.props
The major difference that I’m going to highlight in regards to state .
- With a class component, you automatically have the use of state.
- With a traditional function component you don’t.
But the beauty of hooks is that you can have a functional component and still include state. useState is a hook given to us by React. Here in this example both Counter.js and Counterz.js are accomplishing the same goals.
