DEV Community: joshf500

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

joshf500 — Tue, 02 May 2023 21:22:35 +0000

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.

Advantages of Javascript's Built-in Array Iterator Methods

joshf500 — Thu, 06 Apr 2023 21:04:55 +0000

An array is a data structure that allows us to store and manipulate a set of values. In Javascript, there are several built-in array iterator methods that conveniently apply a function to each element of the array. These methods can serve several purposes, including the following:

Altering each element of an array
Returning a new array that is comprised of those altered elements
Shrinking an array to include only the elements that satisfy a certain condition
Accumulating an array's elements as inputs and returning a result as a single value.

Let’s walk through some examples of these methods to see how we can use them to simplify our code:

.forEach()

The .forEach() method can be used to execute a function on each element of an array. For example, in an array of integers, we can use this method to add 50 to each element and print each sum. If we want to achieve this result using a traditional for loop, it may look like the following:

let numberSet = [1, 2, 3, 4, 5, 6]
for (let i=0; i<numberSet.length; i++){
numberSet[i]=numberSet[i]+50
console.log(numberSet[i])
}
//prints: 51 52 53 54 55 56

Now, let's print the same result using the .forEach() method:

let numberSet = [1, 2, 3, 4, 5, 6]
numberSet.forEach(i => console.log(i+50))
//prints: 51 52 53 54 55 56

From this comparison, we can see how the .forEach() method applies modifiers to each element of an array in fewer lines of code than a traditional for loop.

.map()

The .map() method can be used to execute a function on each element of an array, and then return a new array with the modified result. For example, in an array of integers, we can use this method to print a new array comprised of each element multiplied by 5. If we want to achieve this result using a traditional for loop, it may look like the following:

let numberSet = [1, 2, 3, 4, 5, 6]
let timesFive=[]
for (let i=0; i<numberSet.length; i++){
timesFive[i]=numberSet[i]*5
}
console.log(timesFive)
// prints: [ 5, 10, 15, 20, 25, 30 ]

Now, let's print the same result using the .map() method:

let numberSet = [1, 2, 3, 4, 5, 6]
let timesFive = numberSet.map(i => (i * 5))
console.log(timesFive)
// prints: [ 5, 10, 15, 20, 25, 30 ]

From this comparison, we can see how the .map() method applies modifiers to each element of an array and returns the modified elements in a new array in fewer lines of code than a traditional for loop.

The .filter() method can be used to create a new array that includes only the elements which satisfy a specified condition. For example, in an array of strings, we can use this method to print a new array that includes only the elements which contain the "r" character. If we want to achieve this result using a traditional for loop, it may look like the following:

let fruits = ["banana","fig","durian","papaya","raspberry","starfruit"]
let fruitsWithR=[]
for(let i=0; i<fruits.length; i++){
  if (fruits[i].includes("r")==true){
  fruitsWithR.push(fruits[i])
  }
}
console.log(fruitsWithR)
//prints [ 'durian', 'raspberry', 'starfruit' ]

Now, let's print the same result using the .filter() method:

let fruits = ["banana","fig","durian","papaya","raspberry","starfruit"]
let fruitsWithR = fruits.filter(i=>i.includes("r")==true)
console.log(fruitsWithR)
//prints [ 'durian', 'raspberry', 'starfruit' ]

From this comparison, we can see how the .filter() method returns a new array containing the elements that satisfy a specified condition in fewer lines of code than a traditional for loop.

.reduce()

The .reduce() method can be used to return a single value that is the cumulative result of each element in an array. For example, in an array of integers, we can use this method to print the total product of each element. If we want to achieve this result using a traditional for loop, it may look like the following:

let numberSet = [1, 2, 3, 4, 5, 6]
let product=1
for (let i=0; i<numberSet.length; i++){
product=product*numberSet[i]
}
console.log(product)
//prints 720

Now, let's print the same result using the .reduce() method:

let numberSet = [1, 2, 3, 4, 5, 6]
let product= numberSet.reduce((i,j) => i*j,1)
console.log(product)
//prints 720

From this comparison, we can see how the .reduce() method returns a cumulative result using the elements of the initial array as inputs, and requires fewer lines of code than a traditional for loop.

These examples show how Javascript's built-in array iterator methods allow us to execute a function on each element of an array, and to do so more concisely than traditional for loops.