React Hooks 101

Whether you’re new to React or have been using it for years you’ve likely heard of Hooks! The feature was apart of the release of React 16.8 in February 2019 and has been popular among engineers ever since. So what are Hooks and what do they mean for you as a developer? Let’s take a look at what Hooks do and the problems they were created to solve.

Where Do Hooks Come From?

Pre-React v.16.8, components were grouped into two different categories: function-based or class-based. Class-based components are (as the name infers) created using the class keyword, can define the state, and also have access to the lifecycle methods available for components in React. Function-based components on the other hand are unable to set state and access the lifecycle methods, so they have to pull this data from parent components.

When you’re building out an app with a large number of components you could imagine that it would become difficult to pass data efficiently and correctly? Also, before Hooks, it was hard for developers to reuse state and specific functionality between class-based components. It was common to either pass or render your props, which could lead to large components, extra time writing duplicate code, and overly complex patterns.

Hooks were introduced as a solution to these complexities and encouraged seamless data flow inside components instead of between them. They allow us to organize the code inside of our components into reusable pieces.

What are Hooks?

Before we explicitly define what Hooks are, let’s think about how components and functions work in React. Components are an incredibly powerful tool in React and make it easy to reuse logic across our programs, however, they must render something to the user in order to work, making them not great for sharing non-visual data in our code. Functions are great for passing code, but you can’t store your state in them.

Hooks allow you to “hook” into all of those great React features like state and the lifecycle methods in functions, ultimately allowing you to use React without components. You can also use the built-in Hooks in Javascript to create your own custom Hooks.

Code Breakdown

Let’s take a look at this code from React’s documentation that renders a counter:

import React, { useState } from 'react';
function Example() {
  // Declare a new state variable, which we'll call "count"  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

In the above code useState is a Hook being used to add local state to a function component, without accessing information from a class component. The useState hook returns the current state and a function that allows you to update the state. useState is very similar to this.setState in that it enables you to change the state, but useState does not merge your old and new states together. useState is an example of only one type of Hook, and there are many more available. You can also create your own custom Hooks in React.

Benefits of Hooks

As you know, the more you build and write code in your apps the more complexity increases. Classes can be difficult to manage across a program and can’t be condensed very well. Using Hooks we don’t need components that are strictly class or function-based, which allows you to streamline your coding and ultimately provides uniformity across your React components. Hooks encourage functional programming and simplicity in your code. React Hooks are typically easier to implement, helps you write shorter code, and make your program cleaner to read and more concise.

Below I’ve shared more information on how to get started with Hooks. Give them a shot in your next project and try something new!

Sources:

Introducing Hooks - React

React Hooks Tutorial - RWieruch