Photo by Nathan Dumlao on Unsplash

React’s Hooks in 5 Minutes!

Leave classes behind and grasp this API ↪️ 💪

What are they?

A set of functions that provide a direct API to methods we access on Component instances. We can create stateful components or access the component lifecycle without class instances 🎉

For those in camp TL;DR, scroll down for a collection of demos 👍

Jumping straight in 👟

Consider this app that selects and displays a color value 🎨

We need a class instance to add state.

const colors = {
  Sea: '#a2ccb6',
  Sand: '#fc22b5',
  Peach: '#ee786e',
}

class App extends Component {
  state = {
    color: colors.Sea,
  }
  render = () => {
    const { color } = this.state
    return (
      <Fragment>
        <select
          value={color}
          onChange={e => this.setState({color: e.target.value})}
          >
          { Object.entries(colors).map(c => (
            <option key={`color--${c[0]}`} value={c[1]}>
              {c[0]}
            </option>
          ))}
        </select>
        <h2>{`Hex: ${color}`}</h2>
      </Fragment>
    )
  }
}

But with hooks

const { useState } = React
const App = () => {
  const [color, setColor] = useState(colors.Sea)
  return (
    <Fragment>
      <select value={color} onChange={e => setColor(e.target.value)}>
        {Object.entries(colors).map(([name, value]) => (
          <option value={value}>{name}</option>
        ))}
      </select>
      <h1>{`Hex: ${color}`}</h1>
    </Fragment>
  )
}

useState is a hook that allows us to use and update stateful values.

useState

The useState hook provides a stateful value and a way to update it. The argument is the default value. That value can be any type too! 👍

No need for an class instance 🙌

Don’t be afraid of that syntax. useState makes use of Array destructuring.

It’s equal to

const state = useState(Colors.Sea)
const color…