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

Deactivate numerous buttons with the help of jQuery

Steps to retrieve a value from a promise function

Tips for adding and deleting elements after cloning in jQuery

How do I extract a parameter when passing it to a promise in NodeJS?

Leveraging jQuery to implement onclick functionality within a Jinja2 loop

Converting an object to JSON in javascript: A step-by-step guide

The AngularJS HTTP interceptor is a crucial component for handling

What is the best way to properly redirect a page using a router link in Vue.js 2?

Experimenting with a function invoked from a jQuery AJAX callback using Jasmine testing framework

Error While Installing Atom Editor Packages

React Checkbox malfunctioning: Troubleshooting and solutions

Is there a way to exclude a specific div based on two select choices?

What is the best approach to developing Vue components with unique templates while maintaining the same functionality without duplicating code?

Encountered an error with "Unexpected token import" while attempting to run pm2 on my React application deployed on a Digital

What is the best way to display an HTML page in the bottom right corner instead of within a div?

Differences between const and let when utilizing the require function

Issue with Angular Route Guard - Incorrect redirection to login page

What is the best method for converting a variable with HTML content into a printable string?

Encountering the error message "'node' is not recognized as an internal or external command" while attempting to install phantomjs via npm

Guide to decoding JSONP data sent from a remote server