useEffect cleanup with axios?

I’m confused about cleanup functions in useEffect hooks w/ axios. My component has an isLoading state as it’s getting the data from an API, and then the state changes to false once the data is displayed. This causes my component to render twice (‘loading’ first time, and populated with info the second time), which causes the axios api request within my useEffect fn to be called twice. The second time it logs “Axios request aborted” to the console. Is there any workaround for this or is it not a big deal?

export default function ParentComponent(){
 const [ items, setItems ] = useState([]);
 const [ isLoading, setIsLoading ] = useState(true);

    useEffect(() =>{

        const source = axios.CancelToken.source();
        axios.get('https://api-url-here',
        { cancelToken: source.token})
        .then(res => {
            setItems(res.data.items);
            setIsLoading(false);
        })
        .catch(err => {
            if(axios.isCancel(err)) {
                console.log('Axios request aborted.');
            } else {
            console.error(err)
            }
        });
        return () => {
            source.cancel();
        };
    }, []);

return(
<>
  { isLoading ? <h3>Loading...</h3> :
    items.map(thing => <ChildComponentName key={thing.id} prop={'bla bla bla etc.'} />)
                    }
</>
)
}

Is the app React v18 and is it wrapped in a <StrictMode> component?

yes, that is correct.
Edit: everything seems to work just fine functionally as well. It’s just logging “aborted” to the console although all the data is present.

It’s a debug/test feature of React 18, it’s expected behaviour. In <StrictMode> when components first mount, they are always immediately unmounted then remounted. Essentially, they always render twice.

See: https://reactjs.org/blog/2022/03/29/react-v18.html#new-strict-mode-behaviors

Omg, thank you so much!!

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.