React Hooks IS AWESOME!

What is Hooks? How to Use Hooks? Why Hooks?

Photo credit: cronj.com

(Disclaimer: This article is intended for readers who want to start with Hooks but not sure how and why.)

I. AM. IN. LOVE. WITH. HOOKS!!!

Back in coding bootcamp, we learned to use state in parent and pass props to their children.

I mean it’s not bad, but in a way it looks bulky and not very readable when your file is really long. I hadn’t officially learned to use Hooks until a VERY recent project that I am doing (I am talking about only a week ago). Mainly because I am so scared of useEffect (you know how sometimes concepts just don’t come to you intuitively — this is one of the concepts to me). But then I had someone experienced to review my code, she used Hooks to get rid of the bulkiness of the state code. That’s when I started to realize the advantage of Hooks and why people enjoy using Hooks so much.

Before I ramble my love to Hooks, let’s break down to those readers who are trying to learn Hooks. In this article, I will cover:

• what is React Hooks?
• Why Hooks, i.e. the advantage over class component
• How to Use Hooks?

What is React Hooks?

React Hooks is introduced in React 16.8 (released in 2019 — pretty recent, but considered meh in tech world LOL). Hooks let you use state without writing class components, i.e. you can only use Hooks in functional component.

Example without Hooks:

import React from 'react';
export default class App extends React.Component {
  state = {
    counter: 1,
    lastName: '',
    hobbies: []
  }
  // how you update state
  addCount = () => {
     this.setState((prevState) => {
       prevState.counter + 1
     })
  }

Example with Hooks:

import React, { useState } from 'react';
function App() {
  const [counter, setCounter] = useState(1);
  const [lastName, setLastName] = useState('');
  const [hobbies, setHobbies] = useState([]);
  // how you update state in Hooks
  const addCount = () => {
    setCounter(prevState => prevState.counter + 1)
  }

In a way, I personally think it looks so much cleaner and easier to write. I was definitely skeptical about Hooks at first, especially when it comes to lifecycle methods, since I’ve learned so much about componentDidMount and componentDidUpdate . In Hooks, useEffect is the somewhat replacement of lifecycle methods in class component (here’s an article to explain why they are not the exact replacement.) We are going to touch base on that in a bit.

Let’s talk about the advantage of using Hooks!

Why Hooks?

From the React documentation, here are the motivations why Facebook created Hooks:

• hard to reuse stateful logic between components, i.e. you have to restructure your components when you use the components passing props
• complex components are not as friendly. One example they stated is after using componentDidMount to set up for an event listener, componentWillUnmount is needed to clean up. As a result, Hooks’ useEffect can help solve this issue by splitting one component into smaller functions
• In order to make React to stay more relevant in the next few years, like other Javascript library, like Angular and Glimmer, Hooks prevent the use of classes and use function so that a user can use more of a React’s features without classes. But to clarify, classes would still be around no matter what.

To sum up all these, HOOKS IS BETTER AND EASIER TO USE! As someone who used to be skeptical about Hooks and was really used to using class components, Hooks have definitely made my React experience more friendly and I personally found it easier to pass props without thinking about restructuring my components (basically what the first point is saying).

How to Use React Hooks?

Using the State Hook

As stated in the beginning of this article, I have demonstrated a quick snapshot of the difference between class component and functional component.

Example without Hooks:

import React from 'react';
export default class App extends React.Component {
  state = {
    counter: 1,
    lastName: '',
    hobbies: []
  }
// how you update state
  addCount = () => {
     this.setState((prevState) => {
       prevState.counter + 1
     })
  }

Example with Hooks:

import React, { useState } from 'react';
function App() {
  const [counter, setCounter] = useState(1);
  const [lastName, setLastName] = useState('');
  const [hobbies, setHobbies] = useState([]);
// how you update state in Hooks
  const addCount = () => {
    setCounter(prevState => prevState.counter + 1)
  }

If we want to call the state in class component, we have to call it with this.state. However, in functional component, we can just call it without this.state , like {counter} , rather than this.state.counter .

If we want to update state, in class component, we have to call with this.setState . However, in functional component, we can call it with setSomething , like setCounter .

In case you are wondering what’s up with the square brackets [] , according to the documentation, this is what they called a array destructuring . In other words, with our first example const [counter, setCounter] = useState(1) would be equivalent to:

const counterStateVariable = useState(1);
const counter = counterStateVariable[0];
const setCounter = counterStateVariable[1];

Using the Effect Hook

(Please pardon me if I am not getting into too much detail in this since I am still learning.)

Without Hooks, we would use componentDidMount and componentDidUpdate to render states and we would use componentWillUnmount to clean up. Consider useEffect is the combination of all of the above.

Without Hooks,

componentDidMount() {
   document.title = `This button has been clicked ${this.state.counter} times.`
}
componentDidUpdate(prevProps, prevState) {
  if (prevState.count!== this.state.count) {
    document.title = `This button has been clicked ${this.state.counter} times.`
  }
}

With Hooks,

useEffect(() => {
  document.title = `This button has been clicked ${counter} times.`
}, [count]); 
// Only re-run the effect if counter changes.

Apologize for not being able to show the comparison between componentWillUnmount and useEffect since I am still not very familiar with that. But the React documentation has done a very good job to explain that with plain English to help developers to understand.

Conclusion

I hope this article could get you started with learning Hooks! I hope to write more about Hooks in the future and so I can write more in-depth articles. Thanks for reading and stay tuned!