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; 
