To Class or Not to Class: A React Hooks Story
While the colon in the title can tell you about my academic background — be prepared to see em dashes — I will tell you about React hooks. Introduced by Sophie Albert and Dan Abramov in 2018, React hooks promise a “cleaner React”. I will tell you what I have learnt about React hooks here. Whether the promise is fulfilled or not, you will have to decide for yourself.
What Exactly are “Hooks”?
A hook is a portion of the code that modifies the expected behavior (More here). I first came across the term in studying Sequelize, and built in hooks were incredibly helpful in manipulating the tables. Hooks for React were slightly different in that you they can only be applied to certain components.
Two Components of React
There are two kinds of components in React — class and functional. The class component includes lifecycle methods that allow you to access and modify your code at a certain point in its process. The most commonly used lifecycle methods include constructor, render, and componentDidMount.
Functional component, on the other hand, does not use any of the lifecycle methods. It is a function that takes in props and returns JSX.
While you can access the state of your application in a class component and manipulate values in lifecycle methods—i.e. setState in componentDidMount—functional component does not provide such service directly. This is where hooks come in. Instead of passing in props to the functional component we can create a local state and update it using the built-in hooks, useState and useEffect.
PB&J of React Hooks
As seen above, React hooks need to be imported to the functional component in order to be used. Once they are imported, useState takes in two values in the form of a destructured array— an initial value and a set function. Destructuring allows us to rename the state variables and the set function defines the change that will be applied to the initial value.
useEffect is the ambitious combination of componentDidMount and componentDidUpdate. In a class component if you want your page to re-render you need a componentDidUpdate along with componentDidMount. More code, more room for bugs, is something I heard and experienced (many times now) so I want to pass this on to you.
I first heard about React hooks from a friend. I asked him a question about updating a class component with lifecycle methods, and he said “he never saw constructors and componentDidUpdate in React and hated seeing so many ‘this’ keywords”. He also said an interviewer for his current job preferred that he solves the problem with React hooks. It was interesting to me because that was all I did up to that point. I worked on refactoring my code. It was challenging at first, because my brain was wired to think in classes with their complicated methods. I could see that hooks were more efficient, and I spent more time to learn them. Efficiency is the holy grail of programming, after all.
Official React website assures the users that class components are not going away, yet. But I would suggest, if you are planning to learn React, start with hooks. Because, why waste time write lot code when few code do trick?
GitHub: https://github.com/hatibek
The project I am a part of: https://gol-developer-edition.herokuapp.com/
