React is getting its Hooks into you!

Couldn’t resist that title.

I enjoy programming languages that find a way to update and improve themselves. Similar to how software itself will update to give the user new features, so can the language itself. It’s very beneficial because it often means that the job of the programmer becomes easy and more efficient.

In a previous post I wrote about different types of React Components and how they work. In discussing the differences between Class and Functional Components, I brought up that Functional Components don’t have state or lifecycles as they are purely just a function. But React developed a way to improve to give more use and well… functionality to Functional Components, React Hooks!

Hooks were first introduced in 2018 and then came in React v16 in early 2019. What a hook does could be pretty much summed up with:

Hooks give Functional Components the powers associated with Class Components

Now that statement alone is pretty revealing, but let’s take a deeper dive under the hood.

Functional Components now have state

Implementing the hook “useState” when creating components gives it stateful logic and management. To give an example, below is a thrilling example of a button that will count up with each click:

class ButtonClicker extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
     counter: 0
   };
 }

 render() {
   return (
     <>
       <button onClick={() => this.setState({ counter:    this.state.counter + 1 })}>
         Click
       </button>
      <button onClick={() => this.setState({ counter: this.state.counter -1 })}>
         Click
      </button>
     <>
   );
 }
}

Needles to say, this is quite a bit of code, we have to initialize the constructor, set the initial state, and constantly have to deal with this every time we update the state. By using a hook with a Functional Components, the same result can be achieved with :

import React, { useState } from 'react';
export function ButtonClicker = () => {
const [counter, setCounter] = useState(0);
return (
<button onClick={() => setCounter(counter + 1)>Click</button>
<button onClick={() => setCounter(counter - 1)>Click</button>
 )
}

The two components above will render and result in the same thing. The big thing to notice is the component built using ‘useState’ uses significantly less code. The constructor was bypassed entirely when setting the initial state. It reduces the amount of code used overall and therefore makes the code easier to read.

Being said, Class Components can still be used, it comes down to preference. If a programmer is more comfortable using Class Components, to each their own.

This a very basic example of what hooks can bring to React applications. While they do not have to be used, they bring a lot of power to once simple Functional Components. There is a small learning curve but hooks open many possibilities for future projects.