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;

You can't issue side-effect in the render return of a React component, especially if it triggers rerenders. — Drew Reese, Sep 30 '21 at 08:49

Hagai Harari · Accepted Answer · 2021-09-30T08:56:18.573

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

This solution did worked and decrease logs. Thank you – Maryam Mohebbi Sep 30 '21 at 09:37 — Maryam Mohebbi, Sep 30 '21 at 09:37

score 1 · Answer 2 · answered Sep 30 '21 at 08:50

You can write your component likes this and call the APIs when the component mount. The API calls happens when the lat, lon values are changed.

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

const WeatherHourlyForcast = (props) => {
  const { coordinates : { lat, lon } } = props;
  const [loader, setLoader] = useState(false);
  const [hourlyForcastData, setHourlylyForcastData] = useState(null);

  useEffect(() => {
    callApi();
  }, [lat, lon]); //It's call the API's when the lat, lon values are changed

  const callApi = () => {
    setLoader(true);
    const latitude = lat;
    const longitude = lon;
    const apiKey = "23422500afd990f6bd64b60f46cf509a";
    const units = "metric";
    const apiUrl = `https://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&appid=${apiKey}&units=${units}`;
    axios.get(apiUrl).then((response) => {
      console.log(response.data);
      console.log(response.status);
      console.log(response.statusText);
      console.log(response.headers);
      console.log(response.config);
      console.log("showHourlyForcast", response.data.hourly);
      setHourlylyForcastData(response.data.hourly);
      setLoader(false);
    });
  };

  if (loader) {
    return (
      <div>
        <h1>Loading...</h1>
      </div>
    );
  }

  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>
  );
};

export default WeatherHourlyForcast;

I tried this. but I think this is a problem. on load of page it didn't call API and nothing was sent to map for rendering. — Maryam Mohebbi, Sep 30 '21 at 09:41
Had your correct way to pass `props` from parent to child component — Asif vora, Sep 30 '21 at 09:54

Run useEffect only one when a special property changed

2 Answers2