Use Cases for the useState, useContext, and useLocation Hooks in React

In React, hooks allow us to conveniently access and update variables without using class components. Let's explore some of the differences between three common ones, useState, useContext, and useLocation.

useState

When we import useState from React, we can declare a variable as a local state, and update it with a specified callback function.

import React from "react";
import {useEffect, useState} from "react";

export default function CreateByAirline(){
    const [airlines, setAirlines] = useState([])
    const [searchInput, setSearchInput] = useState("");
    const navigate = useNavigate()
    useEffect(() => {
        fetch(`http://localhost:6001/airlines`)
          .then(res => res.json())
          .then(data => {
            setAirlines(data)
           })
      }, []);
...
}

In the example above, we initialize the "airlines" state as an empty array. We then fetch data from a local host and pass that data into the "airlines" state when we call .then(data => {setAirlines(data)}).

The useState hook is useful for updating variables that only apply to our local component. However, there are other hooks that allow us to share data between components.

The useContext hook gives a component access to context data and re-renders the component when the data changes.
It takes a context object created by the createContext method as its argument and returns the current context value. Then, when useContext is imported into another component, we can access data from the context.

The useContext hook is useful when we would like to pass
multiple data points between components. For example, when we call fetch requests inside of a context, we can set several state variables that we can now access in other components. This can greatly simplify the process of passing data between components, rather than passing props up and down the tree.

useLocation

When a component hosts a URL that links to another, we can pass data between them using useLocation.

import React from "react";
import {useNavigate} from 'react-router-dom'

function ViewAirlineList({airlines}){
const navigate = useNavigate()


return (
    <ul>
        {airlines.map((airline) => {
        return(
        <span class="options" key={airline.id} onClick={()=>{navigate('/reviewslist',{state:{ airline }});}} >
            <img src={airline.logo}/>
            <p>{airline.name}</p>
        </span>
        )
        })}
    </ul>
)
}
export default ViewAirlineList

In the example above, the ViewAirlineList component has a navigation function to the /reviewslist route. Inside this function, we can declare and assign a state. In this case, when a given element of the airlines array is clicked, the navigate function executes and the state is assigned to the clicked element.

Then, when we navigate to the corresponding component of the /reviewslist route, we can call on the state that we assigned in the ViewAirlineList component by importing useLocation and calling the useLocation() function:

import { useEffect } from "react";
import React, {useState} from "react";
import { useLocation } from "react-router-dom";
function ReviewsList() {
  const [reviews, setReviews] = useState([])
  const location = useLocation()
...

return (
 <main>
      <h2>{location.state.airline.name}</h2>
 ...
 </main>
  );
}

When we call {location.state.airline.name}, we access the location from which we navigated, as well as the state. This state was previously set as an object called airline, which contains a name key.

The useLocation hook is useful for accessing information from the current URL location. This is helpful when the data we need in the current component was set within the component from which we navigated to get to the current one.

Though the useState, useContext, and useLocation hooks are all used to pass and update variables, their use cases vary depending on the locations where the data is set and where we want to access or update it. If we want to set and update data within the same component, useState will suffice. If we want to manage a state globally, we can set a component as the context provider using createContext, and set the components which we want to access that data as consumers using useContext. If we want to manage a state that was set in the component from which we navigated, the useLocation hook is the best option.