manage-state-in-a-functional-component.md

Manage State In A Functional Component

Before the introduction of React 16.8, you had a couple options for declaring and managing state in your components.

The first class way was to create a class component and then add local, component state to it.

If you already had a functional component, you could avoid the conversion to a class component with custom HOCs and Render Prop components or any number of third-party libraries such as React PowerPlug and Recompose.

However, projects using React 16.8+ have Hooks at their disposal. The Hooks API's base offering is a state hook -- useState.

import React, { useState } from "react";

const Toggler = () => {
  const [on, setOn] = useState(false);
  const [toggleCount, setToggleCount] = useState(0);

  const incrementToggleCount = setToggleCount(prev => prev + 1);
  const handleToggle = () => {
    setOn(prev => !prev);
    incrementToggleCount();
  };

  return (
    <React.Fragment>
      <Thing on={on} />
      <button onClick={handleToggle}>{on ? "ON" : "OFF"}</button>
      <p>Toggle Count: {toggleCount}</p>
    </React.Fragment>
  );
}

You can manage a variety of state values in a functional component with useState. The useState function takes the initial state value as an argument and returns a tuple with the current state value and an setter function for updating that piece of state.