A quick intro to local state in react

Originall posted on TM––WLSH

State in react can be a fairly intimidating concept. Storing memory all around your application for different components to access seems scary - but when we talk about state, we are referring to one of two things; Global State and Local State.

Global state is the big scary application memory that all of your components can access. I'm only just getting my head around how to use that at the minute, and so far it doesn't seem too straight forward. If someone would like to provide a guest blog post on the basics of using global state, please get in touch at [e-mail].

Local state however, is a very simple concept, that comes in handy in almost every component that I build! The best example in my opinion is a hamburger menu. When you break it down, a hamburger menu has two states; Open and Closed. Let's build a little component that allows us to demonstrate how to switch between the two. A working version can be found on the homepage to this very website!

// here we are importing react, but we are also importing
// the useState hook, that is used to control local state
import React, { useState } from 'react';

// here we are simply declaring our hamburger component
const Hamburger = () => {

  // by calling the useState hook here, we are declaring a
  // state variable. In this case, out state variable is called
  // hamburgerOpen. setHamburgerOpen is also declared, and this
  // is a function to change the state of hamburgerOpen. Lastly
  // we are setting the initial state of hamburgerOpen to false
  // because we want the hamburger menu to be closed.
  const [hamburgerOpen, setHamburgerOpen] = useState(false);

  // here we are creating a new function called toggleHamburger
  // that we will use to change the state of our hamburger menu.
  const toggleHamburger = () => {

    // here we are calling our setHamburgerOpen function so that
    // we can alter the state of the component. We are passing in
    // the current value of hamburgerOpen, but because we are prefixing
    // the value with an exclamation mark, that means the opposite.
    // So the below simply means set hamburgerOpen to the opposite of
    // it's current value. In our case, the current value is false,
    // so when this function runs, it will be set to true.
    setHamburgerOpen(!hamburgerOpen)
  };

  // here we are returning the html for our component.
  return (

    // react handles events slightly differently than regular html
    // but its fairly straight forward - you can see here that we have
    // an onClick event handler, which when performed, will invoke our
    // toggleHamburger function.
    <button onClick={toggleHamburger} className="hamburger">
      <span className="hamburger-line" />
      <span className="hamburger-line" />
      <span className="hamburger-line" />    
    </button>
  )
}

export default Hamburger;

It might seem slightly scary at first, but there are really only three steps to local state:

Setting the state variable.
Creating a function to alter the state variable.
Invoking your function.
Let's break it down in code snippets:

// here we are creating the state variable hamburgerOpen and
// setting it's value to false.
const [hamburgerOpen, setHamburgerOpen] = useState(false);

// here we are creating a function that will alter our state
// variable and change it to a value that we are passing in.
const toggleHamburger = () => {
  setHamburgerOpen(!hamburgerOpen)
};

// could also be written slightly more consicely like this:
// const toggleHamburger = () => setHamburgerOpen(!hamburgerOpen);

// and lastly we are invoking our function whenever anybody
// clicks on the hamburger button!
<div onClick={toggleHamburger} className="hamburger">

I hope that all made sense, but if you do have any questions, comments or criticisms, please do not hesitate to get in touch with me at [e-mail] and I'll be sure to take everything on board!