Intermediate React - Intro to Hooks

Learning Goals

• Understand how to add state to a functional component with useState
• Understand how to perform side effect behavior in a functional component with useEffect
• Be able to migrate a class based component to a functional component

Vocab

• useState - A React Hook which enables us to add state to a functional component
• useEffect - A React Hook which enables us to add side effect behavior to a functional component

React Introduces Hooks (v16.8 - February 2019)

Hooks are functions that let you “hook into” React state and lifecycle features from functional components. React gives us some built-in hooks that we’ll take a look at shortly, but we can also create our own custom hooks that will allow us to reuse/share stateful logic.

There are a number of different motivations behind adding hooks to React, which you can read more about here. The most important take-away for you is that hooks can allow us to remove class based components from our applications, and simplify the management of functions that depend on the lifecycle of the component.

Some Important Rules

• Only call hooks from within react functions (They don’t work inside of class-based components and they don’t work outside of React)
• Don’t call hooks inside of loops, conditions, or nested functions

Benefits of Hooks

• Let you use more of React’s features without classes (state and an alternative to lifecycle methods)
• Let you organize the logic inside a component into reasonable isolated units
• Allow you to reuse stateful logic without changing your component hierarchy
• Will likely reduce your bundle size because code using Hooks tends to minify better than equivalent code using classes
• No breaking changes

Getting started

We’re going to be using this ideabox repo today. Before going any further please do the following:

• Clone the repo to your machine
• Switch to the using-hooks branch
• Run npm install in the repo
• Put a thumbs up in the participants panel of zoom once you’re done!

State Hook

We call this hook inside a functional component to add some local state to it. React will preserve this state between re-renders. useState returns a pair: the current state value and a function that lets you update it. useState takes 1 argument - the initial state. This value is only used during the first render.

What if your component needs more than 1 piece of state? No worries… you can use the state hook multiple times in a single component.

The array destructuring syntax lets us give different names to each piece of state and the functions that update them.

import React, { useState } from 'react'

function App() {
  const [name, setName] = useState('')
  const [age, setAge] = useState(0)
  
  return (
    <form className='Form'>
      <h1>My Form</h1>
      <input 
        title='name'
        value={name}
        onChange={(event) => setName(event.target.value)}
      />
      <input 
        title='age'
        value={age}
        onChange={(event) => setAge(event.target.value)}
      />
    </form>
  )
}
export default App

In the code above, we’ve set up two pieces of state for a form, as well as their corresponding setter methods.

• name and its setter method setName
• age and its setter method setAge

Additionally, we’ve set the inital values for these pieces of state, based on what we passed into useState.

import React, { useState } from 'react';
import './Form.css';

function Form(props) {
  const [title, setTitle] = useState('')
  const [description, setDescription] = useState('')

  const submitIdea = event => {
    event.preventDefault();
    const newIdea = {
      id: Date.now(),
      title,
      description
    }
    props.addIdea(newIdea);
    clearInputs();
  }

  const clearInputs = () => {
    setTitle('')
    setDescription('')
  }

  return (
    <form>
      <input
        type='text'
        placeholder='Title'
        name='title'
        value={title}
        onChange={event => setTitle(event.target.value)}
      />

      <input
        type='text'
        placeholder='Description'
        name='description'
        value={description}
        onChange={event => setDescription(event.target.value)}
      />

      <button onClick={submitIdea}>SUBMIT</button>
    </form>
  )
}

export default Form;

Effect Hook

The Effect Hook, useEffect, allows us to perform side effects (data fetching, subscriptions, etc) from a functional component. It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount, but unified into a single API.

import React, { useState, useEffect } from 'react'

function App() {
  const [pets, setPets] = useState([])
  const [error, setError] = useState('')

  const getPets = async () => {
    const url = 'http://localhost:3001/api/v1/pets'
    setError('')

    try {
      const response = await fetch(url)
      const pets = await response.json()
      setPets(pets)
    } catch(error) {
      setError(error.message)
    }
  }

  useEffect(() => {
    getPets()
  }, [])
  
  return (
    <div className='App'>
      <h1>PetBox</h1>
      { error && error }
      <PetList pets={pets} />
    </div>
  )
}
export default App

Here, we’ve imported the useEffect hook from React and added a getPets method that will fetch all of our pets. Since App is now a functional component, we don’t have access to lifecycle methods like componentDidMount. Instead, we can now utilize the useEffect hook to call getPets.

There are a few important things to be aware of in the code above. First, the useEffect hook MUST return a clean-up function or nothing at all. We can’t return a Promise. This means that we can’t write an async function inside of useEffect (because an async function always returns a Promise). That’s why we have written getPets outside of useEffect and just called it inside of useEffect.

Also, notice that we have passed an empty array as a second argument to useEffect. Without doing this, we would get caught in a infinite loop because the useEffect hook runs when the component mounts and after EVERY update/render. Because we are setting the state after every data fetch, the component updates and the effect runs again. By adding an empty array as the second argument, we avoid activating the effect hook when the component updates and it will only run once when the component mounts and unmounts. If we want the effect to run when one of the variables is updated, then we would add that variable to the array. This could be a prop or a piece of state. Because we only want to update the pets once, on mount, and there are no other props or pieces of state that depend on this effect, we can pass an empty array. Check out the docs for more info on conditionally firing an effect.

import React, { useState, useEffect } from 'react';
import Ideas from './Ideas';
import Form from './Form';
import './App.css';

function App() {
  const [ideas, setIdeas] = useState([])

  useEffect(() => {
    document.title = `Ideabox (${ideas.length})`
  })

  const addIdea = (newIdea) => {
    setIdeas([...ideas, newIdea]);
  }

  const deleteIdea = (id) => {
    const filteredIdeas = ideas.filter(idea => idea.id !== id);

    setIdeas(filteredIdeas);
  }

  return(
    <main className='App'>
      <h1>IdeaBox</h1>
      <Form addIdea={addIdea} />
      <Ideas ideas={ideas} deleteIdea={deleteIdea} />
    </main>
  )
}

export default App;

Checks for Understanding

In your notebooks, respond to the following:

• What does useState do? What two things does it give back to us?
• What does useEffect do? What two arguments do we need to pass to it?
• Why should we consider using React Hooks over class based components?

Resources

• React Docs on Hooks
• Making Sense of React Hooks by Dan Abramov
• React hooks: not magic, just arrays by Rudi Yardley
• Why React’s new Hooks API is a game changer by Rudi Yardley
• React Docs on Higher Order Components
• The amazing Render props pattern for React.js — lifecycle begone! by Christoffer Noring
• How to fetch data with React Hooks by Robin Wieruch
• How the useEffect Hook Works by Dave Ceddia