Executing React Fetch API Twice upon loading the page

Question

Executing React Fetch API Twice upon loading the page

Double-fetching Issue with React Fetch API on Initial Page Load

import React, { useState, useEffect } from 'react'
    import axios from 'axios';
    import {  Grid, Paper, TextField } from '@mui/material'
    import PersonOutlineIcon from '@mui/icons-material/PersonOutline';
    
    function FormApi() {
    
      //Styling for Mui fields and paper
      const paperStyle = { padding: '50px ', width: 550, margin: '50px auto' }
    
      //Fetching data from the API
      const [userData, setUserData] = useState([{data:null,support:null}]);
      const apiUrl = 'https://reqres.in/api/users/2';
    
        useEffect(()=>{
    
          const fetchData = async () =>{
    
            await axios.get(`${apiUrl}`)
            .then((response) =>{
              setUserData(response.data)
    
            }).catch((error)=>{
                console.log(error)
            })
          }
    
          fetchData();
          }
    
        ,[]);
    
      return (
    
        <Grid container spacing={2} style={paperStyle}>
    
          <Grid align='center' >
            <Paper elevation={20} >
    
              <Grid align='center'>
    
                <h2 style={{padding:'10px' ,background: "#000080", color: 'white' }}> 
       <PersonOutlineIcon large style={{fontSize:'80%'}} />User Details</h2>
    
              </Grid>
              
              <form>
             
              <img style={{width:"20%"}} src={userData.data  ? userData.data.avatar : ''}/>
                <h1 style={{color:'#000080'}}>{userData.data  ? userData.data.first_name : ''} 
       {userData.data  ? userData.data.last_name : ''}</h1>
    
              <Grid container >
                <Grid item xs={6} >
                  <h2 style={{color:'white', background: "purple"}}>Contact Info</h2>
                  <TextField   value={userData.data  ? userData.data.id : ''}   variant="standard" 
         />
                  <TextField  value={userData.data  ? userData.data.email  : ''}   
       variant="standard" />
                </Grid>
    
                <Grid item align='left' xs={6} style={{marginBottom:'40px'}}>
                  <h2 style={{color:'white', background: "purple"}}>Social Link</h2>
                  <TextField  value={userData.support ? userData.support.url : ''}   
       variant="standard" />
                  <TextField  value={userData.support ? userData.support.text : ''}     
      variant="standard" />
                </Grid>
                
              </Grid>
              </form>
            </Paper>
          </Grid>
        </Grid>       
      )
    }

export default FormApi

javascript npm axios

Answer 1

Answer №1

In the development environment, React may render components twice, causing confusion for developers. One way to prevent this is by commenting out the <React.StrictMode> tag in the index.js file.

This double rendering only occurs during development and StrictMode offers several benefits for developers:

Identification of components with unsafe lifecycles
Warning about outdated string ref API usage
Notification about deprecated findDOMNode usage
Detection of unexpected side effects
Recognition of legacy context API
Ensuring the reusability of state

If the double rendering issue does not impact your regular development work, it is advisable to retain the <React.StrictMode> tag.

For more information, refer to: React StrictMode

Answer 2

In the development environment, React may render components twice, causing confusion for developers. One way to prevent this is by commenting out the <React.StrictMode> tag in the index.js file.

This double rendering only occurs during development and StrictMode offers several benefits for developers:

Identification of components with unsafe lifecycles
Warning about outdated string ref API usage
Notification about deprecated findDOMNode usage
Detection of unexpected side effects
Recognition of legacy context API
Ensuring the reusability of state

If the double rendering issue does not impact your regular development work, it is advisable to retain the <React.StrictMode> tag.

For more information, refer to: React StrictMode

Answer 3

Answer №2

React 18 has implemented a new feature to ensure reusable state in development environments when StrictMode is enabled. This behavior may seem unusual, but it should not affect your production Build.

While it can be a bit annoying, there is a workaround available for this issue. You can find more detailed information on how to handle it in this comprehensive answer: React 18, useEffect is getting called two times on mount

Answer 4

React 18 has implemented a new feature to ensure reusable state in development environments when StrictMode is enabled. This behavior may seem unusual, but it should not affect your production Build.

While it can be a bit annoying, there is a workaround available for this issue. You can find more detailed information on how to handle it in this comprehensive answer: React 18, useEffect is getting called two times on mount

Answer 5

Answer №3

If you encounter this issue, remember that you can utilize the useRef hook to handle it efficiently. Don't worry too much about it as it typically only occurs in development mode.

const renderAfterCalled = useRef(false);

useEffect(() => {
    if (!renderAfterCalled.current) {
      // your API call func
    }

    renderAfterCalled.current = true;
}, []);

Instead of removing <React.StrictMode>, consider exploring other solutions to fix the problem. Remember, <React.StrictMode> is a useful tool during development that identifies potential issues and cautions against unsafe practices.

Answer 6

If you encounter this issue, remember that you can utilize the useRef hook to handle it efficiently. Don't worry too much about it as it typically only occurs in development mode.

const renderAfterCalled = useRef(false);

useEffect(() => {
    if (!renderAfterCalled.current) {
      // your API call func
    }

    renderAfterCalled.current = true;
}, []);

Instead of removing <React.StrictMode>, consider exploring other solutions to fix the problem. Remember, <React.StrictMode> is a useful tool during development that identifies potential issues and cautions against unsafe practices.

Answer 7

Answer №4

From my understanding, the problem arises from the HTTP client sending two requests: one to the route path "/" and another to "/favicon.ico"

To resolve this issue, you can update your code as follows:

useEffect(()=>{ checkLocation(); //your code ,[]);

Answer 8

From my understanding, the problem arises from the HTTP client sending two requests: one to the route path "/" and another to "/favicon.ico"

To resolve this issue, you can update your code as follows:

useEffect(()=>{ checkLocation(); //your code ,[]);

Answer 9

Answer №5

upon further review give this a shot

function FormData() {

  //Styling for form fields and paper
  const paperStyle = { padding: '50px ', width: 550, margin: '50px auto' }

  //Fetching data from API
  const [userData, setUserData] = useState([{data:null,support:null}]);
  const apiUrl = 'https://reqres.in/api/users/2';
//debugger

      const fetchData = async () =>{

        await axios.get(`${apiUrl}`)
        .then((response) =>{
          setUserData(response.data)

        }).catch((error)=>{
            console.log(error)
        })
      }

    useEffect(()=>{

      
      fetchData();
      }

    ,[]);

Answer 10

upon further review give this a shot

function FormData() {

  //Styling for form fields and paper
  const paperStyle = { padding: '50px ', width: 550, margin: '50px auto' }

  //Fetching data from API
  const [userData, setUserData] = useState([{data:null,support:null}]);
  const apiUrl = 'https://reqres.in/api/users/2';
//debugger

      const fetchData = async () =>{

        await axios.get(`${apiUrl}`)
        .then((response) =>{
          setUserData(response.data)

        }).catch((error)=>{
            console.log(error)
        })
      }

    useEffect(()=>{

      
      fetchData();
      }

    ,[]);

Executing React Fetch API Twice upon loading the page

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Taking out the z-index from the transition code

Creating a clone of JSON for use as a template

Is there a way to include this function in an array without triggering it right away?

Experiencing issues running 'npm run dev' on a MacBook with M1 chip and Node.js

The Bootstrap tooltip effectively fades away after displaying text, but it is not positioned correctly above the icon

What are some strategies for efficiently displaying a large amount of data on a screen using Javascript and HTML without sacrificing performance?

Fixing TypeError in React App: How to Resolve the "Cannot read property 'prototype' of undefined" Issue

Having trouble retrieving data from MongoDB and rendering it on an HTML page

Changing a password on Firebase using Angular 5

How can Angular hide a global component when a particular route is accessed?

Set the minimum height of a section in jQuery to be equal to the height of

"Unfortunately, this package has been tagged as private, and cannot be accessed at this

Customizing the Class of a jQuery UI ui-autocomplete Combobox Container

Why would someone opt to utilize process.env.PORT in their code?

Is it necessary to implement clustering for each route in an Express.js application?

Setting up NextJS on Vercel for website deployment can encounter a common error known as ENOENT Error, which is caused by the absence of a specific file or

Executing secure journey within TypeScript

The process of inserting data using NextJS Mysql works seamlessly when executed through phpMyAdmin, however, it encounters issues when

What are the available choices for constructing HTML based on an ajax response?

When utilizing the `useLocation` hook, the location information appears to be missing