Hooks, line, and sinker

Photo by Mael BALLAND on Unsplash

If you’re a React beginner, I would strongly suggest continuing to read this post as I’ll cover the basics of React Hooks. React Hooks were included in React v16. 8.0 in February 2019 and since then their usefulness has been widely debated. The first question is, what exactly are Hooks? Simply put, Hooks are functions that allow developers to access state and other features without having to write a traditional class component. As a reminder, state could only be declared in class components before the introduction of Hooks. This is exciting because Hooks help to eliminate the fear of starting a function component, only to realize in the future that it needs to be refactored into a class component to house state logic. By design, React inherently favors the use of functions as they agree with the idea of reusable components. React isn’t getting rid of class components but Hooks do reintroduce the conceptual usefulness of React functions.

Upon my first encounter with React Hooks, I was a bit confused. Why was Hooks necessary if there were already methods for declaring and transferring state logic? As I worked with React more, I realized just how difficult it can be to transfer state from one component to another, especially in larger-scale applications. This is exactly why Hooks were conceived. Previously, you’d be forced to use render props or higher-order components to share state logic between components. However, both methods can become complicated as they require a certain structure or for you to change your component hierarchy completely. React Hooks grant simpler data flow that’s easier to read and ultimately easier to work with. As you add more logic to your components they will grow and become more complex. You might even notice that some of your class components house many different functions connected to separate concerns because they rely on the state set in the said class component. This isn’t ideal but, thankfully, Hooks offer a remedy. Hooks can be used to separate components into smaller functions that are sorted based on related data rather than state and lifecycle methods.

Also, Hooks are favored as they circumvent JavaScript’s ‘this’. If you’re familiar with other languages then I’m sure that you’ve encountered how JavaScript’s ‘this’ works differently in comparison. ‘This’ for new and experienced developers can be difficult to grasp and in turn, can hinder your ability to learn React or effectively use class components. In React, ‘this’ is integral to class components and their functionality. As a result, Hooks deliver an alternative approach that offers a way to bypass ‘this’ but still carries all class component capabilities within the realm of function components. I would still suggest learning how to use JavaScript’s ‘this’ considering it continues the standard for most existing applications.

Generally, React Hooks are very simple to introduce into new or existing React applications. There are 2 rules when it comes to implementing Hooks:

• Hooks can only be used in function components.
• Hooks should only be called at the top level (so not inside of loops, conditions, or nested functions). This is because the order in which Hooks are called is important to data flow and ultimately the user’s experience with your application.

To make sure that you are following those rules, React created a plugin that enforces the 2 rules.

React v16.8 comes with certain Hooks already included and you do have the ability to create your own Hooks. For this post, I’m going to use the State Hook (useState), a Hook given to us by React, to demonstrate how state logic can be introduced to a function component. Before you do anything, after creating your function component you need to import useState at the top of the page.

import React, {useState} from 'react';

Now we’ll declare a state variable.

function Example() {
  const [count, setCount] = useState(0);

  //useState allows us to set the state and its initial value. 
  //useState will always return 2 values: the current state and the      function that updates it 
  //within the brackets, to the left is the variable that returns the current state value when called and to the right is the function that will update the state when called

Reading the state is simple

<p> You clicked {count} times</p>
// 'You clicked 0 times'

Updating the state (for this example, I’ve added a button)

<button onClick={()=> setCount(count + 1)}> Click Me! </button>
// the setCount function is called to update the initial count. It started at 0 and is now 1. 

Altogether, this is what our component looks like

 1: import React, { useState } from 'react'; 
 2:
 3: function Example() {
 4:    const [count, setCount] = useState(0);
 5:
 6:    return (
 7:      <div>
 8:        <p>You clicked {count} times</p>
 9:        <button onClick={() => setCount(count + 1)}>
10:         Click me
11:        </button>
12:      </div>
13:    );
14:  }

This was only a general view of React Hooks and what they offer but I hope that this was helpful. For more information React has amazing Hooks documentation. Give this a clap and if anyone has a comment or question leave it down below!