multiple useEffect in a component doesn't work

Question

When I call API from single useEffect, it works perfectly. But when I am trying to call another API from another useEffect in the same component its shows a error.

If it's possible, please have a look at my project on codesandbox.

import React, { useEffect, useState } from 'react';
import { Container, Row, Col } from 'react-bootstrap';

const TeacherDashboard = () => {
    // console.log(props)
    const [appointmentList, setAppointmentList] = useState([]);
    const [viewProfile, setViewProfile] = useState([]);
    console.log(viewProfile);
    useEffect(() => {
        async function loadData(){
            const response = await fetch('http://localhost:4200/appointments')
                const data = await response.json();
                setAppointmentList(data)
        }
        loadData()
    }, [appointmentList])

    useEffect(() => {
        async function proData() {
            const response = await fetch('http://localhost:4200/schedule')
            const data = await response.json();
            setViewProfile(data)
        }
        proData()
    }, [viewProfile])

    return (
        <Container>
            <Row>
                <Col>
                   {
                       appointmentList.map(app => 
                           <div style={{border: '1px solid blue'}}>
                               <li>Name : {app.name} </li>
                               <li>Id : {app.s_id} </li>
                               <li>Sec : {app.sec} </li>
                               <li>Email : {app.email} </li>
                               <li>Date & Time : {app.dateTime} </li>
                           </div>

                        )
                   }
                </Col>
            </Row>
        </Container>
    );
};

export default TeacherDashboard;

Answer 1

I am not sure the purpose of setting both appointmentList and viewProfile states as the part of the dependency arrays of both useEffect hooks. Both of them will eventually result in an infinite loop as you are directly updating the respective states in the useEffect hooks.

From what I can see, you only need to make both requests once, thus you should be using an empty array as the dependency array, such that both requests will be called only when the component is mounted. This is how it can be done:

useEffect(() => {
  async function proData() {
    const response = await fetch('http://localhost:4200/schedule')
    const data = await response.json();
    setViewProfile(data)
  }
  proData();
  async function loadData(){
    const response = await fetch('http://localhost:4200/appointments')
    const data = await response.json();
    setAppointmentList(data)
  }
  loadData();
}, []);