On first Load useEffect hock Shows an error calling the api multiple time

Question

I'm new to React.js On the First Time load Code shows an error when i comment this part {data.advice} and run it shows me html it also calls API 2 times it gives an Error on Reload. how to fix it?

import { Box, Button, Card, CardActions, CardContent, Container, Typography } from '@mui/material';
import axios from 'axios';
import React, { useEffect, useState } from 'react';

const Advice = () => {
    const [data, setData] = useState(null);
    const clicked = () => {
        callAPI();
    }
    const callAPI = () => {
        axios.get('https://api.adviceslip.com/advice')
            .then(respone => {
                setData(respone.data.slip)
                console.log(respone.data.slip);
            })
            .catch((error) => {
                console.log(error);
            })
    }
    useEffect(() => {
        callAPI();
    }, [])
    return (
        <Box>
            <Container>
                <Typography variant='h2' sx={{ textAlign: "center" }}>Advice App</Typography>
                <Card sx={{ maxWidth: 500, margin: "10px auto", display: "block", textAlign: "center" }}>
                    {/* <CardMedia
                        sx={{ height: 140 }}
                        image="/static/images/cards/contemplative-reptile.jpg"
                        title="green iguana"
                    /> */}
                    <CardContent>
                        <Typography gutterBottom variant="h5" component="div">
                            Advice of the Day
                        </Typography>
                        <Typography variant="body2" color="text.secondary">
                            {data.advice}
                        </Typography>
                    </CardContent>
                    <CardActions>
                        <Button size="small" onClick={clicked}>Share</Button>
                        <Button size="small">Learn More</Button>
                    </CardActions>
                </Card>
            </Container>
        </Box>
    );
};

export default Advice;

https://codesandbox.io/s/cool-wildflower-p7k6ee?file=/src/App.js

Any Help will be Appreciated

Answer 1

As mentioned in the comments,

You are getting error because your code is trying to print advice property of data even before it is initialised. you can try below code to make sure it will print when data is present.

{data && data.advice}

The possible reason for sending two api calls might be because your app component is wrapped in <strict> tags. That means react is running in strict mode. This will call your effects twice and react will do that in dev mode only. So that is fine. Nothing to worry about. reference: React 18 strict mode causing component to render twice

Answer 2

On the first run, your data variable is null (from useState(null)) so then trying to access data.advice triggers an error since you cannot access object properties on a null value.

There are many ways of fixing this, but 2 of the most simple ones (just to get your job done now) are:

1. const [data, setData] = useState({ advice: null }); - replace the initial value of data with an object. Then data.advice will render null on the first run, and nothing will be visible. You could also have a loading message instead of null, as in ...{ advice: 'Loading...' });.

2. guard the displayed expression ({data.advice}) using either {data && data.advice || null or data ? data.advice : null, whichever you prefer. A loading message instead of null is again possible.

The double network call can be due to the Advice component being rendered twice (or re-rendered automatically) by its containing component on page load (thus running your useEffect hook twice). You need further debugging to catch that, and for us to help you'd need to update your question with the container component's code, so that we might catch the issue.

Answer 3

The reason you get an error on the first render is beacuse you have "data" initialised with null. "data" is null, thus there is no "advice" property and the error you should get is "Cannot read property of null".

The use Effect hook is called after the render.

What does useEffect do? By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we’ll refer to it as our “effect”), and call it later after performing the DOM updates. In this effect, we set the document title, but we could also perform data fetching or call some other imperative API.

Source: https://legacy.reactjs.org/docs/hooks-effect.html

Side Note: These are the outdated docs but they should be correct, regarding this behaviour.

The solution @CodeThing provided should fix the error. It checks if "data" exists, if its not it immediately returns false and doesnt check "data.advice".

On the other hand you could initialize data as object with the advice property and set it to an empty string: { advice: ""}

Hope this helps :)

Answer 4

Because you set null for the data and then you are trying to access it as an object. you should use a condition. e.g:

 <Typography variant="body2" color="text.secondary">
      {data?.advice}
  </Typography>