React Hooks

So what are React hooks? First, it’s useful to understand that React takes advantage of various programming paradigms, such as Object Oriented Programming and Functional Programming, by combining them into a single React application. The two styles of programming are used to different effects to create components. Class-based components provide built-in functionalities such as state and lifecycle methods. Functional components, components written as functions, do not inherently provide those same features. And so, for the most part, class-based components can be thought of as mini-brains or centers that contain state, and logic, and render other functional components that utilize the information that is managed in the class-based component. While the other hand, functional components can be thought to receive information from the class-based components and render the actual visuals or html-like JSX.

But now, the described relationship between class-based and function-based components has changed in that functional components can also utilize state and lifecycle methods. This is done via hooks, which are “functions that let you “hook into” React state and lifecycle features from function components”, as per React documentation on hooks. So how do we use hooks? Let’s look at an example:

Want to read this story later? Save it in Journal.

import React, { Component } from 'react';
export default class MovieContainer extends Component {
  state = {
    movies: []
  }
  componentDidMount() {
    fetch(API)
    .then(resp => resp.json())
    .then(listOfMovies => this.setState({ movies: listOfMovies }))
  }
}

This example zones in on the state and lifecycle portion of the class-based component. Here you can see that we have access to the state object and a lifecycle method called componentDidMount. But the idea is that class-based components allow you to declare state and lifecycle methods because classes allow you to use inheritance, and so the component is able to inherit state and lifecycle functionality from React.Component.

In contrast, functional components, via hooks, allow you to use state and lifecycle methods by importing the those functions from React. So for example:

import React, { useState, useEffect } from 'react';
const MovieContainer = () => {
  const [movies, setMovies] = useState([])
  useEffect(() => {
    fetch(API)
    .then(resp => resp.json())
    .then(listOfMovies => setMovies(movies => 
      [...movies, listOfMovies])}, movies)
}

Using this functional component, we are not inheriting, but importing the useState and useEffect methods that mimic state and lifecycle methods for class-based components.

The useState method takes in an argument, an initial value for the state which can be anything, in this case, it’s an empty array and returns an array with two elements. The first element is the state, and the second is the method that allows you to update the state. In this example, we apply destructuring to store the two elements into variables, movies and setMovies, for later usage.

In addition, we also import the method useEffect which mimics lifecycle methods. Normally the useEffect method takes in one argument, a callback that would execute your code, but in this case, since we want to have useEffect mimic componentDidMount, it needs to take in two arguments. The first argument is the callback which will set the state upon the MovieContainer mounting, and the second argument is the state itself. Since useEffect is executed every time a re-render occurs, such as updating the state for movies within the callback, React allows you to guard against this by “skipping effects” as in use“Effect”. This means that the method useEffect won’t execute because of the second argument that is passed, the state, in this example, movies. The useEffect method will compare the state to the state that is being updated by the callback, if there aren’t any changes, then it will skip updating the state with the callback, preventing a re-render which otherwise would lead to an infinite loop of updating state and re-rendering.

Also to note, the naming relationship that existed in the class component is still utilized in the functional component, for example state, setState, and movies, setMovies. Also, the setMovies method is passed a callback, called a “wrapper” method which ensures that the state is updated only after the MovieContainer component has re-rendered.

React hooks are also valuable of other reasons due to the nature of functional components. Class-based components execute certain lifecycle methods behind the scene on each initial render and re-render causing slower performance as compared to functional components that do not. React hooks allow you to execute state and lifecycle methods-like functionality only when needed.

For more in-depth information, you can check out the React documentation https://reactjs.org/docs/hooks-intro.html.

📝 Save this story in Journal.

👩‍💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.