How to handle eslint missing dependencies warning on useEffect of Reat Hooks

Question

I am using useEffect for initial data

export const ChannelConfig = (id) => {
    const history = useHistory();
    const dataUrl = "/channel/"+id;

    useEffect(() => {
        fetch(dataUrl + "/configure")
          .then((resp) => {
              if (resp.ok) {
                  return resp.json();
              } else {
                  handleError(resp, "Server");
              }
          })
          .then((data) => {
              setSrcValue(data);
              setEditValue(data);
          })
    }, []);

    ... ...

    function handleError(resp, entity) {
        resp.json().then((err) => {
            customToast.error(resp.status, err, entity);
            if (resp.status === 404) {
                history.push("/pages/error-404")
            }
        });
    }

And I got this warning

 React Hook useEffect has missing dependencies: 'dataUrl' and 'handleError'. Either include them or remove the dependency array  react-hooks/exhaustive-deps

Was I wrong about using useEffect?

And, additionally when I convert "function handleError" to "useCallback", I got missing dependencies warning message about "history" from eslint.

Answer 1

I use "useRef" react hooks, now the missing dependencies warning is gone. Is that proper using??

export const ChannelConfig = (id) => {
    **const history = useRef(useHistory());**
    const dataUrl = "/channel/"+id;

    useEffect(() => {
        fetch(dataUrl + "/configure")
          .then((resp) => {
              if (resp.ok) {
                  return resp.json();
              } else {
                  handleError(resp, "Server");
              }
          })
          .then((data) => {
              setSrcValue(data);
              setEditValue(data);
          })
    }, [dataUrl]);

    ... ...

    const handleError = useCallback((resp, entity) => {
        resp.json().then((err) => {
            customToast.error(resp.status, err, entity);
            if (resp.status === 404) {
                **history.current.push("/pages/error-404")**
            }
        }, []);
    }

Answer 2

Missing dependency warning is to notify the user to avoid unintentional closure issues.

You can disable the warning if you are absolutely sure what you are writing is correct and intentional

or

You can choose to get around the warning by converting the function to use useCallback and then adding it as a dependency. Note that the function also uses history which is provided to it from closure and hence the useCallback will also warn you to use it.

You can add history to useCallback as dependency as it will not change

export const ChannelConfig = (id) => {
    const history = useHistory();
    const dataUrl = "/channel/"+id;

    ...
    const handleError = useCallback(function(resp, entity) {
        resp.json().then((err) => {
            customToast.error(resp.status, err, entity);
            if (resp.status === 404) {
                history.push("/pages/error-404")
            }
        });
    }, [history]);

    useEffect(() => {
        fetch(dataUrl + "/configure")
          .then((resp) => {
              if (resp.ok) {
                  return resp.json();
              } else {
                  handleError(resp, "Server");
              }
          })
          .then((data) => {
              setSrcValue(data);
              setEditValue(data);
          })
    }, [handleError]);

    ... ...

Please check this post for more details on this problem: How to fix missing dependency warning when using useEffect React Hook?