It's been nearly 2 months since I started on The Odin Project, and I must say I was very excited when I finally started with the React section. Already having completed the Javascript section, it was a blast to complete sections until I got to State and Lifecycles. In it, I found it difficult to understand the concepts because of the way Class components are structured. However, that was not the case when I got introduced to Functional components and Hooks! I'll quickly summarize in 3 points why I love the latter over the former:
1. No need for this
I can recall the first real roadblock I hit when learning JavaScript was this (I still shudder even now remembering it). It was always confusing to understand what the scope of this was for a certain case, and I spent tutorial hell trying to figure this out (The pun-ibilities are endless!). Needless to say, its always nice when you can avoid using it.
In Class components, when passing methods to other components, it is necessary to bind them to this keyword. This is done so that it stays in the same context inside the component it is passed to. Ideally, the binding should be done in the constructor component.
But with the countless hours spent figuring out why a part of an app wouldn't work as intended, only to know that the state was being referred wrong. Thankfully, such a problem in functional components is non-existent🥳
2. Hooks are a blessing!
Up until February 2019, if you wanted to access state and lifecycle in functional components, well, tough luck! That meant functional components were used primarily to return JSX logic and labeled as "dumb" components😟
However, with the release of React 16.8, everything changed. In this version, we were introduced to the concept of Hooks, allowing a functional component to have both state and lifecycle.
Instead of the usual setting initial state using this.state, you can use the useState() to set the state value and a method that updates the state.
Plus, did I mention how clean it looks?
Functional component state:
const[ value, setValue ] = useState("");
Class component state:
class App extends Component{
constructor(props){
super(props)
};
this.state = {
value: "",
};
};
Mmm, one-line code looks soooo satisfying 😍🤤.
3. Easy on beginners
While the debate has been going on back and forth for Class components vs. Functional components, one thing is certain: For a beginner, I'd highly recommend they work with Functional over Class components.
This may seem absurd since both really have little to no performance difference and in a larger React app, take up almost similar lines of code. But, for someone like myself, who had a basic grasp on OOP (Object Oriented Programming), working with Functional components was a no-brainer, purely cause its easier to understand and read (This is just my conclusion, it will differ for others).
Wrapping up! 😊
Hope you enjoyed reading my first post on Hashnode!! Definetly give your reaction and feedback, and of course, share this article with someone who needs to read this!
- For similar but short content, follow me over at Twitter 🐤 here.
- Check out what I'm currently working on over at Github 🐱 here
Till next time, take care and cheers!🥂