Too much rerendering happeing in React with APIs-CodePudding

I'm just a beginner at React and learning how to use an API with react.

My problem is in my code too much rerendering is happening. I came to know about it when I add console.log("test"); line.

What should I do to overcome this issue?

import * as React from "react";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableHead from "@mui/material/TableHead";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";

const Home = () => {
    const [data, setData] = React.useState([]);

    useEffect(() => {
        fetch("https://61924463aeab5c0017105ebe.mockapi.io/test")
            .then((res) => res.json())
            .then(
                (result) => {
                    if (result) {
                        console.log("test");
                        setData(result);
                    }
                },
                (error) => {
                    console.log(error);
                }
            );
    });

    return (
        <div>
            <TableContainer component={Paper}>
                <Table sx={{ minWidth: 650 }} aria-label="simple table">
                    <TableHead>
                        <TableRow>
                            <TableCell align="center">ID</TableCell>
                            <TableCell align="center">Name</TableCell>
                            <TableCell align="center">Avatar</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {data.map((row) => (
                            <TableRow
                                key={row.name}
                                sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
                            >
                                <TableCell align="center">{row.id}</TableCell>
                                <TableCell align="center">{row.name}</TableCell>
                                <TableCell align="center">
                                    <img src={row.avatar} width="25" />
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </TableContainer>
        </div>
    );
};

export default Home;

CodePudding user response：

Your useEffect is getting executed every time a render happens inside the component.

You need to add empty dependency in the useEffect so that it does not get executed a second time.

useEffect(() => {
    fetch("https://61924463aeab5c0017105ebe.mockapi.io/test")
        .then((res) => res.json())
        .then(
            (result) => {
                if (result) {
                    console.log("test");
                    setData(result);
                }
            },
            (error) => {
                console.log(error);
            }
        );
}, []);