useeffect function fetch multiple data

Question

I am trying to fetch data from an API from an input. After providing the input and calling the data, I am getting two fetch call from same data. here is the code of input:


  const [countryName, setCountryName] = useState<string>("");

  const handleInputChange = (event: {
    target: { value: React.SetStateAction<string> };
  }) => {
    setCountryName(event.target.value);
  };

  const onSubmit = () => {
    navigate(`/country/${countryName}`);
  };

<TextField
          variant="standard"
          placeholder="Enter country Name"
          value={countryName}
          onChange={handleInputChange}
        />

Here I am using the input to fetch the data:

const { name } = useParams();

  const [loading, setLoading] = useState<boolean>(false);

  const [country, setCountry] = useState<InitCountry>();

  useEffect(() => {
    const getCountry = async () => {
      setLoading(true);

      const response = await fetch(
        `https://restcountries.com/v3.1/name/${name}`
      );
      const data = await response.json();
      console.log(data);
      setCountry(data.length > 1 ? data[2] : data[0]);

      setLoading(false);
    };
    getCountry();
  }, [name]);

What am I doing wrong here?

Nick Vu · Accepted Answer · 2022-04-28 16:46:53Z

3

Your setup seems good, but the root cause is possibly from React.StrictMode

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions: ...

This effect is only in development which means it won't happen in your production, but if you don't want intentionally double-invoking, you can remove it from your code.

answered Apr 28, 2022 at 16:46

Nick Vu

15.6k5 gold badges29 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

useeffect function fetch multiple data

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related