Run useEffect only one when a special property changed

Question

I want to update render when a special property changes. This property income from parents. I Made a useState called loader to handle codes when I have data or not. if the loader is false, my code calls API and if it is true render data. First of all I use useEffect this way. It didn't update render

useEffect(() => {
callApi();
}, []);

After that I used useEffect this way. props.coordinates is a property that my code should update after it changes.

  useEffect(() => {
    callApi();
    setLoader(false);
  }, [props.coordinates]);

But my codes are in loops, and my API key was blocked. Could you let me know what my mistake is ?

This my component:

import React, { useEffect, useState } from "react";
import axios from "axios";
import ForcastHour from "./ForcastHour";
import "./WeatherHourlyForcast.css";

const WeatherHourlyForcast = (props) => {
  const [loader, setLoader] = useState(false);
  const [hourlyForcastData, setHourlylyForcastData] = useState(null);

  useEffect(() => {
    callApi();
    setLoader(false);
  }, [props.coordinates]);

  const showHourlyForcast = (response) => {
    console.log("showHourlyForcast", response.data.hourly);
    setHourlylyForcastData(response.data.hourly);
    setLoader(true);
  };

  function callApi() {
    let latitude = props.coordinates.lat;
    let longitude = props.coordinates.lon;
    const apiKey = "23422500afd990f6bd64b60f46cf509a";
    let units = "metric";
    let apiUrl = `https://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&appid=${apiKey}&units=${units}`;
    axios.get(apiUrl).then(showHourlyForcast);
    console.log("hourly", apiUrl);
  }

  if (loader) {
    return (
      <div className="row">
        <div className="col-md-6">
          <div className="row">
            {hourlyForcastData.map(function (hourlyforcast, index) {
              if (index < 4 && index > 0) {
                return (
                  <div
                    className="col-4 box-weather my-auto text-center"
                    key={index}
                  >
                    <ForcastHour data={hourlyforcast} />
                  </div>
                );
              }
            })}
          </div>
        </div>
        <div className="col-md-6">
          <div className="row">
            {hourlyForcastData.map(function (hourlyforcast, index) {
              if (index < 7 && index > 3) {
                return (
                  <div
                    className="col-4 box-weather my-auto text-center"
                    key={index}
                  >
                    <ForcastHour data={hourlyforcast} />
                  </div>
                );
              }
            })}
          </div>
        </div>
      </div>
    );
  } else {
    callApi();
    return null;
  }
};

export default WeatherHourlyForcast;

Answer 1

While adding dependencies array to the end of useEffect (or any other hook...), each render if the value is not equal to the prev one, the hook will run again.

Because props.coordinates is an object, and in JS objA != objA == true, even if the properties didn't change, React can't know that.

My suggestion is to use the values themselves (assuming they're strings either numbers and so on)

  useEffect(() => {
    (async () => {
      await callApi();
      setLoader(false);
   })()
  }, [props.coordinates.lat, props.coordinates.lon]);

Another thing that you might encounter is setLoader(false) will be called before callApi will be finished, therefore added async behaviour to the hook