React Hooks: useState()

In a recent post on React hooks, I advocated their usage and explained how they could make your functional components flexible, extendable, and reusable. I would like to bring your attention to one of my favorite hooks: useState().

In some cases, you need to bring some state logic into a function component. Instead of rewriting it as a class component, you can hook into React state and lifecycle features. Implementing it is easy!

import React from 'react';
import {useState} from 'react'

function App() {

  const [importantThing, setImportantThing] = useState('initial value')

  return (
    <div >
      {importantThing}
    </div>
  );
}

export default App;

After importing useState from React, we see two values in an array being declared, and an initial value being set. The array is there to destructure the variables in useState, where the first value references the variable that lives in the state, and the second value is the reference to the function that changes the variable.

You can also set the variable to be an object, like so:

const [fruits, setFruits] = useState([{ apple: 'Granny Smith' }]);