Q:

useEffect and the context api

I'm running into a strange issue with useEffect not noticing the change of values being changed with the context api. I have a fetch that I want to run everytime a certain value is changed and I'm using the context api to manage my state value but it doesn't ever seem to notice. I wasn't having this issue when I was passing props instead of using the context api. Is there a trick to this I'm not using? The console error is: ./src/Components/CustomTrip.js
  Line 33:12:  React Hook useEffect has a missing dependency: 'fetchDistance'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
import React, {useContext, useEffect } from 'react'
import { COORDS } from "./coords"
import { MileContext } from './MileContext';
import useCalculateTotals from "./CalculateTotals";

    const CustomTrip = () => {
      const {locationOne, locationTwo, setLocationOne, setLocationTwo, setTotalMiles } = useContext(MileContext);

      const onLocationOneChange = (event) => {
        setLocationOne(event.target.value)
      }
      const onLocationTwoChange = (event) => {
        setLocationTwo(event.target.value)
      }
      const onTotalMileChange = (value) => {
        setTotalMiles(value)    
      };
      useCalculateTotals();

      async function fetchDistance()
            {
                const res = await fetch("https://api.mapbox.com/directions-matrix/v1/mapbox/driving/" + locationOne + ";" + locationTwo + "?sources=1&annotations=distance&access_token=pk.eyJ1Ijoiam9zaGlzcGx1dGFyIiwiYSI6ImNqeTZwNGF1ODAxa2IzZHA2Zm9iOWNhNXYifQ.X0D2p9KD-IXd7keb199nbg")
                const mapBoxObject = await res.json();
                const meters = mapBoxObject.distances[0];
                const miles = parseInt(meters) *  0.00062137119;
                console.log(miles.toFixed(2));
                onTotalMileChange(miles.toFixed(2));  
                console.log(miles);
            }         

        useEffect(() => {
            fetchDistance()
        }, [locationOne, locationTwo]);

      return (
        <div>
          <h3>Customize your trip</h3>
            Mileage will be calculated as a round trip.
            <br/>
            Select your starting point
            <select value={locationOne} onChange={onLocationOneChange}>
            {
                Object.entries(COORDS).map(([campus, coordinates]) => (
                <option key={campus} value={coordinates}>
                {campus}
                </option>
            ))}
            </select>
            Select your destination
            <select value={locationTwo} onChange={onLocationTwoChange}>
            {
                Object.entries(COORDS).map(([campus, coordinates]) => (
                <option key={campus} value={coordinates}>
                {campus}
                </option>
            ))}
            </select>
        </div>
      )
    };

export default CustomTrip;

Here's the api context for more umm context.
import React,{useState, createContext} from 'react';

export const MileContext = createContext();

export const MileProvider = props => {
    const [totalMiles, setTotalMiles] = useState(0);
    const [drivers, setDrivers] = useState(1);
    const [rentalPaddingDay, setRentalPaddingDay] = useState(1);
    const [hotelCost, setHotelCost] = useState(0);
    const [hotelDays, setHotelDays] = useState(0);
    const [hotelTotal, setHotelTotal] = useState(0);
    const [drivingDays, setDrivingDays] = useState(0);
    const [hotelNights, setHotelNights] = useState(0);
    const [hours, setHours] = useState(0);
    const [meals, setMeals] = useState(0);
    const [laborCost, setLaborCost] = useState(0);
    const [truck26Total, setTruck26Total] = useState(0);
    const [truck16Total, setTruck16Total] = useState(0);
    const [vanTotal, setVanTotal] = useState(0);
    const [mealCost, setMealCost] = useState(0);
    const [vanFuelCost, setVanFuelCost] = useState(0);
    const [rental26Cost, setRental26Cost] = useState(0);
    const [rental16Cost, setRental16Cost] = useState(0);
    const [truck26Fuel, setTruck26Fuel] = useState(0);
    const [truck16Fuel, setTruck16Fuel] = useState(0);
    const [trip, setTrip] = useState("Custom");
    const [locationOne, setLocationOne] = useState("-97.4111604,35.4653761");
    const [locationTwo, setLocationTwo] = useState("-73.778716,42.740913");
    const [gas, setGas] = useState(2.465);
    const [diesel, setDiesel] = useState(2.91);

    return (
        <MileContext.Provider 
        value = {{
            totalMiles, 
            setTotalMiles, 
            drivers, 
            setDrivers,
            rentalPaddingDay,
            setRentalPaddingDay,
            hotelCost,
            setHotelCost,
            hotelDays,
            setHotelDays,
            hotelTotal,
            setHotelTotal,
            drivingDays,
            setDrivingDays,
            drivers,
            setDrivers,
            hotelNights,
            setHotelNights,
            hours,
            setHours,
            meals,
            setMeals,
            laborCost,
            setLaborCost,
            truck26Total,
            setTruck26Total,
            truck16Total,
            setTruck16Total,
            vanTotal,
            setVanTotal,
            mealCost,
            setMealCost,
            vanFuelCost,
            setVanFuelCost,
            rental26Cost,
            setRental26Cost,
            rental16Cost,
            setRental16Cost,
            truck26Fuel,
            setTruck26Fuel,
            truck16Fuel,
            setTruck16Fuel,
            trip,
            setTrip,
            locationOne,
            setLocationOne,
            locationTwo,
            setLocationTwo,
            gas,
            setGas,
            diesel,
            setDiesel
        }}>
            {props.children}    
        </MileContext.Provider>
    )
}

A:

The code was fine aside from a typo in another file. Upon further review I found that the COORDS object being imported had spaces in them which when placed in the url for api call was being converted to %20. Removing the spaces immediately fixed the problem.

