DEV Community: Nick DAmbrosio

Managing state with useReducer

Nick DAmbrosio — Wed, 16 Sep 2020 16:56:42 +0000

Last time we looked into React Hooks and why they've been introduced, then we refactored a react component built as a class into a function component using hooks, allowing us to share logic between components. Now we're going to look at managing complex state with useState and useReducer.

See the code in this blog in action at

Counter with useState and useReducer

React useState hook

useState is a basic hook that allows us to have local state in a functional component.

We create one by declaring a state variable: counter followed by a function to update it: setCounter.

Initialize the count to zero by passing it 0 as the only argument to useState().

Lastly, because we want to update our state by adding 1 to the previous state(initialized at 0), we need to provide a function of the previous state as an argument to update it.

If you're setting a value that does not rely on the value of the old state, then you can use a value as the argument, otherwise, use a function.

function Counter() {
  const [counter, setCounter] = useState(0)
  const increment = () => setCounter(counter + 1)

  return (
    <div>
      <div>{counter}</div>
      <button type="button" onClick={increment}>
        +
      </button>
    </div>
  )
}

Notice counter (value) and setCounter are being returned as an array from useState(). The order here is important, The setter function will control the state that is managed by the hook.

🤔🤔 What happens when we want another piece of state?

function Counter() {
  const [count, setCount] = useState(0)
  const [disabled, setDisabled] = useState(false)

  const increment = () => setCount(count + 1)
  const toggleDisabled = () => setDisabled(!disabled)

  return (
    <div>
      <div>{count}</div>
      <button type="button" disabled={disabled} onClick={increment}>
        +
      </button>
      <button type="button" onClick={toggleDisabled}>
        {disabled ? "enable" : "disable"}
      </button>
    </div>
  )
}

We can do it as many times as we want! Each useState is unique and can function independently of each other.

However, after writing your third or fourth useState in the same component, you start to feel like that there's got to be something better. If your component needed the ability to undo, you'd have to keep track of the previous state ontop of the current state for every operation.

Let's add some extra capabilities to our counter by adding the ability to decrement, reset, and undo.

function Counter({ initialValue = 0 }) {
  const [previousCount, setPreviousCount] = useState(null)
  const [count, setCount] = useState(0)

  const increment = () => {
    setPreviousCount(count)
    setCount(count + 1)
  }

  const decrement = () => {
    setPreviousCount(count)
    setCount(count - 1)
  }

  const reset = () => {
    setPreviousCount(null)
    setCount(initialValue)
  }

  const undo = () => {
    setCount(previousCount)
    setPreviousCount(null)
  }

  const toggleDisabled = () => setDisabled(!disabled)

  return (
    <div>
      <div>{count}</div>
      <button type="button" onClick={increment}>
        +
      </button>
      <button type="button" onClick={decrement}>
        -
      </button>
      <button type="button" onClick={reset}>
        Reset
      </button>
      <button type="button" onClick={undo} disabled={!prevValue}>
        Undo
      </button>
    </div>
  )
}

Hrmm. We did it, but that's a lot of slightly different, but mostly repetitive, code.

React useReducer hook 🔥🔥🔥

What is useReducer ? It's a hook based off of Javascript's very popular reduce function. Definitely a topic that will require it's own blog post eventually, but until then, here are a few outstanding posts by other people on it

Sarah Drasner: The Almighty Reducer

Kent C Dodds: Array reduce vs chaining vs for loop

An important takeaway of the reducer is it will always return one value, By reducing the previous value down to a single representative one. Reducers are incredibly powerful and it's hard to get far on the internet without seeing them referenced.

The reducer function is a function that receives a state and an action, then reduces to a new state.

(state, action) => newState

The useReducer hook is an alternative to useState, meaning you can use the two interchangeably. However, useReducer is preferred over useState when you have complex state logic, especially when the next state is dependant on the previous state.

useReducer takes two arguments: First being the reducer() method itself and the second is a dispatch method that calls the reduer() method.

The useReducer hook looks like this. It's a function that receives a state and an acation, and reduces it to a new value, in our case: state.

const [state, dispatch] = useReducer(reducer, initialState)

Let's rebuild the previous Counter component using useReducer instead of useState

const CounterReducer = ({ initialState = 0 }) => {
  const reducer = (state, action) => {
    switch (action.type) {
      case "increment":
        return {
          count: state.count + 1,
          prevValue: state.count,
        }
      case "decrement":
        return {
          count: state.count - 1,
          prevValue: state.count,
        }
      case "reset":
        return {
          count: initialState,
          prevValue: null,
        }
      case "undo":
        return {
          count: state.prevValue,
          prevValue: null,
        }
      default:
        return state
    }
  }

  const [state, dispatch] = useReducer(reducer, {
    count: initialState,
    prevValue: null,
  })

  return (
    <div>
      <h1>useReducer Counter: {state.count}</h1>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
      <button
        onClick={() => dispatch({ type: "undo" })}
        disabled={!state.prevValue}
      >
        Undo
      </button>
    </div>
  )
}

Nice! And it looks pretty similar to the architecture used in popular state management library, Redux.

Instead of using a bunch of useState updater functions, useReducer centralizes the state logic of the component into a single reducer function.

Our lord and savior Dan Abramov summed up in a tweet of when to use useState or useReducer when managing component state:

When to use useReducer

Should I use multiple useState or useReducer?

For independent things (isHovering and textInput), multiple useState.

For things that change together (isFetching and fetchedItems), or if their next state depends on previous (todos), I prefer useReducer.https://t.co/wSyKITMRpZ
— Dan Abramov (@dan_abramov) January 10, 2019

For me, I use useState until it feels like the components stateful logic is overly complex. Forms and CRUD applications are a great example of when you'd benefit from useReducer over useState. We'll build a todo-list using useReducer next time.

Recap

useReducer > useState when handling complex state logic that involves multiple sub values, or when the next state is reliant on the previous state
When called, useReducer will return an array of two items: Current State and a Dispatch method
useReducer accepts three arguments:
- reducer function
- initial state
- third, optional init function for lazy initialization of state
Reducers are responsible for handliong transitions from one state to the next. They take in current state and an action and return a new state
Actions are unique events that happen in your app
Actions are dispatched to our reducer when specific events take place.

Hot Damn that was a long post. Thanks for reading!

this was originally posted April 22, 2020 at Hooks-and-Hamburgers.com

React Hooks

Nick DAmbrosio — Wed, 16 Sep 2020 16:51:35 +0000

At React Conf 2018, the React team presented the Hooks Proposal. A new addition to React as of 16.8 and allows you to split a component into smaller functions based on which pieces are related. This results in smaller, faster, easier to understand code.

Watch on Youtube: React Conf 2018

I was a student at Turing School of Software and Design about to finish my run of the program. Eager to explore new technologies I fully embraced hooks (along with anything else Dan Abramov said), and moved away from class based components. Since then I've found that my code is a lot easier to understand, easier to debug, more importantly, more fun to write.

I recommend visiting the React Hooks Documentation and starting your React journey there. This post will briefly cover the how and why for React Hooks and will assume you understand some basic concepts like state. We'll compare a Class-based component to a new functional one with hooks, as well as examples of built-in hooks that are already provided to us.

We'll take a look at useState and useEffect, I'll do a deeper dive into each of these and then we'll get into custom hooks for when we want to share logic between two Javascript functions, next time.

Why Hooks?

Hooks allow you to use local state and other React features without writing a class.
Hooks are special functions that let you "hook into" React state and other lifecycle features inside of function components.

This gif from twitter does a wonderful job at demonstrating the benefits of hooks

Why are we here?

Since React 14 we've had two ways of creating components: classes or functions.

Function components are just that, functions that can accept props and return a React element.

import React, { Component } from "react"

function Heading(props) {
  return <h1>{props.children}</h1>
}

export default Heading

Class based components are Javascript classes. They extend from React.Component and requires use of the render method.

import React from "react"

class Heading extends React.Component {
  render() {
    return <h1>{this.props.children}</h1>
  }
}

let's dive deeper.

Class Based Counter

A class component extends from React.Component and creates a render function which returns a React Component. At the time, class based components provided certain benefits that functional components didn't have access to.

Components can have their own internal state. While you can pass state as props from parent components down your tree, or use a state management library like Redux, some state is internal and doesn't need to be passed to other components.
You gain access to lifecycle methods like componentDidMount(), componentDidUnmount(), and render. These are for when the component is rendered and removed from the DOM, as well as whenever it's updated with new state or props.

😕 What?

Let's look at some code and see if that clears some things up.

Below I've built a simple counter as a React Class. Pressing the button will increase the counter by one.
You can play with this code on Repl

import React from "react"

class Counter extends React.Component {
  constructor() {
    super()
    this.state = {
      counter: 0,
    }
    this.handleIncrement = this.handleIncrement.bind(this)
  }
  componentDidMount() {
    document.title = this.state.counter
  }
  componentDidUpdate() {
    document.title = this.state.counter
  }
  handleIncrement() {
    this.setState({
      counter: (this.state.counter += 1),
    })
  }
  render() {
    return (
      <div>
        <div>{this.state.counter}</div>
        <hr />
        <button type="button" onClick={this.handleIncrement}>
          +
        </button>
      </div>
    )
  }
}

export default Counter

That's a lot of code, and most of it boilerplate, and some being duplicative! We even have to add the this context and then bind it inside the constructor because of implicit binding in vanilla JS. Big yikes

componentDidMount() and componentDidUpdate() handle the side effects of the component mounting and updating on the DOM. This example may seem trivial but there are many other common side effects like DOM mutations, data fetching, and setting up subscriptions.

If we wanted to clean up after the side effects, we'd need to also return a function that has some componentDidUnmount() logic.

Deep Dive on React Lifecycle Methods

Hooks Based Counter

Let's try it again but using React Hooks, the new API from React as of 16.8. This counter functions the exact same way as the class based counter above.

useState() is a hook that lets you add a React state to a function component.
useState() takes on argument, the initial state
useState() returns a pair of values in an array. The current state and a function to update the current state.
useEffect() is a hook that lets you use side effects in your function components
useEffect() tells your component to do something after every render

even the explanations don't take as long to type

You can play with this code on Repl

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

function Counter() {
  const [counter, incrementCounter] = useState(0)

  useEffect(() => {
    document.title = counter
  })

  function handleIncrement() {
    incrementCounter(counter + 1)
  }

  return (
    <div>
      <div>{counter}</div>
      <hr />
      <button type="button" onClick={handleIncrement}>
        +
      </button>
    </div>
  )
}

export default Counter

We import and call useState() to declare a state variable and then pass in the value of whatever value is being passed into useState()

const [counter, incrementCounter] = useState(0)

By destructuring our state array into two variables, we can approach it in a more declarative way. The first value returned is the current state, and the second value is the function that updates the state

In this example, our current state is the value of count, which is 0, and thenincrementCounter is the function that updates count

useEffect(() => {
  document.title = counter
})

Our useEffect() updates the document.title on every render, preventing us from needing excess boilerplate for different stages of the components lifecycle just to keep our component in sync.

Extract and Reuse your Hooks

The real power of React Hooks is when you start writing your own custom hooks. But what is a custom hook? How do you get started?

Well, you could extract information from your function and turn that into a hook.

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

const useCounter = initialCount => {
  const [counter, incrementCounter] = useState(initialCount)
  const handleIncrement = () => incrementCounter(counter + 1)
  return [counter, increment]
}
function Counter() {
  function handleIncrement() {
    incrementCounter(counter + 1)
  }

  return (
    <div>
      <div>{counter}</div>
      <hr />
      <button type="button" onClick={handleIncrement}>
        +
      </button>
    </div>
  )
}

export default Counter

We just extracted data from our function component and turned it into a react hook that can be used anywhere in our application!

Rules of Hooks

Only call hooks at the top level: Don't call them inside of loops, conditionals, or nested functions
Only call hooks from React Functional Components: Don't call them inside regular JS functions, or a React Class based component

Conclusion

Hooks are functions that let you hook into react features from function components.
Hooks addressed many of the pain points developers were experiencing with classes in React. They decrease code length increased developer efficiency as well by making it easier to read.
Hooks let you split components into smaller functions on what parts are logically related.
Custom hooks are awesome

There are lots of built-in React Hooks including useState, useEffect, useContext, useReducer, useMemo, useRef, and useLayoutEffect. The React documentation is great for reference, but over the next few days we'll take a deeper look into the other hooks we have access to, and then get into the true power of React Hooks: creating your own custom hook.

Thanks for reading!

this was originally posted April 4, 2020 at Hooks-and-Hamburgers.com