Hope anyone is able to help me with a custom react hook.

My custom react hook "useFetch" is running 8 times when called. Can anyone see, why it is running 8 times when the custom "useFetch" hook is called?

I am a bit new to React, but it seems like I am using useEffect method wrong. Or maybe I need to use another method.

UseFetch hook method:

import React, { useState, useEffect } from "react";

export const useFetch = function (
  options = {
    IsPending: true,
  },
  data = {}
) {

  // load data
  const [loadData, setLoadData] = useState(null);
  // pending
  const [isPending, setIsPending] = useState(false);
  // error
  const [isError, setIsError] = useState(false);

  useEffect(() => {
    // method
    const fetchData = async function () {
      // try
      try {
        // set pending
        setIsPending(true);

        // response
        const response = await fetch(data.url, data);

        // handle errors
        if (response.status !== 200 && response.status !== 201) {
          // throw new error with returned error messages
          throw new Error(`Unable to fetch. ${response.statusText}`);
        }

        // convert to json
        const json = await response.json();
        // set load data
        setLoadData(json);

        // set error
        setIsError(false);
        // set pending
        setIsPending(false);

        // catch errors
      } catch (err) {
        // set error
        setIsError(`Error fetching data: ${err.message}`);
        // set pending
        setIsPending(false);
      }
    };

    // invoke fetch data method
    fetchData();
  }, []);
  // return
  return {
    loadData,
    isPending,
    isError,
  };
};

export default useFetch;

CodePudding user response：

Every time you change the state within the hook, the parent component that calls the hooks will re-render, which will cause the hook to run again. Now, the empty array in your useEffect dependency should be preventing the logic of the hook from getting called again, but the hook itself will run.

CodePudding user response：

Can you expand a little bit on what you mean with being called 8 times? Where are you placing your console log to know how often the hook is being called?