Diving Deep into useState(), useEffect(), and useRef(): A simple mobile menu with React

useState() manages state changes

Where we might normally store DOM elements in variables and add event listeners to manage state in vanilla JS, React abstracts away this process into a considerably simpler syntax.

It provides a variable to store the current state of a variable, and an updater function to update the state.

The syntax for useState() is shown below:

const [ state, setState ] = useState(initialState);

We use array deconstruction to name two variables that are returned from the useState() hook: our state variable, and our state updater function. We then set our initial state by passing a value to the useState() function.

To demonstrate how we can call the state updater function, let’s imagine in our return block of jsx, we have a button that will update the state when clicked or an input field that will update the state any time it is changed:

return (
  <button onClick={() => setState(2)}>Set to 2!</button> //Sets state to 2 any time it is clicked.
  <button onClick={() => setState(!state)}>Toggle State!</button> //Toggles state if using boolean values.
  <input
    type="text"
    value={state}
    onChange={(e) => setState(e.target.value)} //Sets state to whatever the user inputs in the text field.
  />
)

A quick note: Make sure you wrap your state updater function in a callback function if you are updating the state based on a previous value (like in the last example).

useEffect() manages side effects in a predictable way

Since React components are designed to be pure functions, useEffect() allows us to manage side effects in a way that is predictable. React can predictably handle anything within a component that deals only with itself, but when we need to interact with something outside of the scope of our component, we need to use useEffect() as a sort-of “messenger” to the “outside world.” This is because our side effect probably doesn’t need to be run every time its parent component re-renders (Like fetching from an API every time your component changes).

Let’s break down the syntax below:

useEffect(() => {
  //Do something outside the scope of our component here:
  //console.log(myState);
  //API fetching
  //DOM manipulation
  return () => cleanupFunction();
}, [myState])

useEffect() takes two arguments: a function and a dependency array. If the dependency array is empty, [], then the function will run only once when the component is first mounted, and never again unless the component unmounts and mounts again. The dependency array holds one or more state variables that trigger the useEffect() function to run every time their state changes.

The function should also return a cleanup function removing any event listeners to prevent duplicate event listeners being added each time the effect is run.

Note: If you don’t include the second argument at all (no brackets), then the function will rerun on every render, leading to unexpected results.

useRef() creates a persistent reference throughout the render cycle

In vanilla JS, we might assign a DOM element to a variable in order to do something with it, but using this method inside a React component can present some issues. Namely, the variable can only be defined once the element it’s assigned to is rendered. If the variable assignment happens before the element is mounted, it will be assigned undefined. React provides a way to not only solve that issue, but make references to the DOM more efficient.

useRef() holds the value of null until its reference element is mounted, so it won’t unexpectedly be undefined. useRef() also creates a persistent reference in React, meaning that it doesn’t trigger a re-render each time its reference is used (unlike assigning a variable directly to document.getElementById()). It also works within React’s Virtual DOM, making it way more efficient than dealing directly with the real DOM.

Are you sold? Let’s look at the syntax below:

const myRef = useRef(null); //Initializes with null, later to be assigned to the DOM element. 
//...
return (
  <p ref={myRef}>My Paragraph Element</p>
)

Where will our three React hooks come into play for this component?

We will use useState() to manage whether our menu should be open or not. We will use useEffect() to add an event listener in the document to track if a user clicks outside of the open menu (in order to then close the menu). We will use useRef() to assign a reference to our entire menu container (so that if the user clicks anywhere except the menu area, the open menu will be closed).