Axios.get Firing Twice

Question

So I have a block of code the effectively is taking the url and translating that to a request to an Open API.

The issue is that for whatever reason my axios.get seems to be executed twice. Relatively new developer in React and I I am guessing I am overlooking something fundamental.

Any advice would be greatly received. Thanks in advance.

import React, { useEffect, useState } from "react";
import axios from 'axios';
import {useParams} from 'react-router-dom';
import configData from './config/config.json'


const Article  = () => { 

    console.log('0')
    const requestarticle = useParams();
    console.log('1')
    const [url] = useState(configData.BACKEND_URL + '/articles/' + requestarticle.page)
    console.log('2')
    const [article, setArticle] = useState(null)
    console.log('3')

    useEffect(() => {
        console.log('4')
        axios.get(url)
            .then(Response => 
                {setArticle(Response.data)}
                )
    }, [url])


    if (article){
        return ( 
            <>
            <div id="page-content" dangerouslySetInnerHTML={{__html: article.content}} class="container-sm text-start border border-dark rounded border-3"></div>
            </>
            );
        }

        return(

            <h1> NOTHING TO RETURN</h1>

        )
  
}
 
export default Article ;

Does this answer your question? [React 18, useEffect is getting called two times on mount](https://stackoverflow.com/questions/72238175/react-18-useeffect-is-getting-called-two-times-on-mount) — Youssouf Oumar, Aug 13 '22 at 17:45

score 1 · Accepted Answer · answered May 29 '22 at 16:21

This is due to <StrictMode> most likely in your root tree.

What is strict mode?

StrictMode is a tool for highlighting potential problems in an application.

How does it make useEffect() run twice?

It activates additional checks and warnings for its descendants, or in other words... renders twice.

Note: Strict mode checks are run in development mode only; they do not impact the production build.

Axios.get Firing Twice

1 Answers1