React Hook useEffect has missing dependencies - problem

Question

I'm getting this error and i really can t solve it:

src/api/ConnectApi.js
  Line 25:8:  React Hook useEffect has missing dependencies: 'apiurl', 'dataState', and 'fetch'. Either include them or remove the dependency array. You can also do a functional update 'setDataState(d => ...)' if you only need 'dataState' in the 'setDataState' call  react-hooks/exhaustive-deps

Here's what i have in ConnectApi.js


import axios from 'axios';
import { useEffect, useState } from 'react';

const useCollectData = (url) => {

    useEffect(() => {
        const [fetch, setFetching] = useState({isFetching: false})
        const [dataState, setDataState] = useState({data: []});
        const [apiurl] = useState(url);

                const fetchDataFromApi = async () => {

                    try{
                        setFetching({isFetching: true})
                        const response = await axios.get(apiurl)
                        setDataState({...dataState, data: response.data});
                    }
                    catch (error){
                        setFetching({...fetch, isFetching: true})
                    }
                };
                fetchDataFromApi();
                // eslint-disable-next-line react-hooks/exhaustive-deps
    },[]);
    return [dataState]
};

export default useCollectData

I tried to add apiurl, dataState and fetch to the dependencies array but it won't fix the problem.

Mahadev Mandal Mahadev Mandal · Accepted Answer · 2021-08-04T08:33:58

You are calling useState inside useEffect, which breaks hooks rules. React Hook "useState" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.

import axios from 'axios';
import { useEffect, useState } from 'react';

const useCollectData = (url) => {
    const [fetch, setFetching] = useState({isFetching: false})
    const [dataState, setDataState] = useState({data: []});
    const [apiurl] = useState(url);
    useEffect(() => {
                const fetchDataFromApi = async () => {

                    try{
                        setFetching({isFetching: true})
                        const response = await axios.get(apiurl)
                        setDataState({...dataState, data: response.data});
                    }
                    catch (error){
                        setFetching({...fetch, isFetching: true})
                    }
                };
                fetchDataFromApi();
                // eslint-disable-next-line react-hooks/exhaustive-deps
    },[]);
    return [dataState]
};

export default useCollectData

React Hook useEffect has missing dependencies - problem

2 Answers