Next.js 11 - Axios api call triggering 2 times when page loads

Question

I have been trying to migrate a React.js CRA to Next.js SSR Application, I moved specifically to Next.js 11 as I have some package deps which support only up Next.js 11, as my CRA application is working perfect, but when I moved all my project files to Next.js 11, all my API calls are triggering 2 times when I visit the page, I'm using react 16 and axios to fetch data from my backend, please help me to fix this issue :

Here is sample code :

in pages/test/index.js

"use client"

import React from 'react';
import Test from '../../src/components/test';

const Asdf = () => {
    return ( 
        <Test />
     );
}
 
export default Asdf;

here is the component :

"use client"

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

const Test = () => {

    const [data, setData] = useState([])

    useEffect(() => {
        Axios.get('https://dummyjson.com/products/')
        .then(res => setData(res))
    }, [])

    return ( 
        <>
           test page
        </>
     );
}

export default Test;

In network tab, you can notice 4 request, 2 are preflight and rest 2 calls being triggered :

Is there anyways to prevent it or what I'm doing wrong, please let me know! Thanks in advance.

Answer 1

If you're using React 18 or above, it's because React introduces strict mode. It's basically a feature to help you find bugs in the development environment and won't influence the production environment. Here is the note from React's documentation:

Strict Mode enables the following checks in development:

• Your components will re-render an extra time to find bugs caused by impure rendering.
• Your components will re-run Effects an extra time to find bugs caused by missing Effect cleanup.
• Your components will be checked for usage of deprecated APIs.
• All of these checks are development-only and do not impact the production build.

If you want to avoid this behavior, just go to the next.config file and change the reactStrictMode to false:

const nextConfig = {
  reactStrictMode: false,
};