How to update Api without making an infinite loop?

I want to update and display Api value whenever new POST request is create, without refreshing the page.
Here is the problem, In my React hook implementation when I make an API call it create’s an infinite Api call to the server. I just want it to make a call when new POST request is added.

What I’m doing wrong and How to fix it?

const [data, setData] = useState([]);

useEffect(() => {

        const fetchData = () => {
            fetch('http://127.0.0.1:8000/main/api/')
            .then(response => response.json())
            .then((res) => {
                const data = res.map((item, index) => ({
                    title: item.title,
                    price: item.price,
                    quantity: item.quantity,
                }));
                setData(data);
            });
        };

        console.log(data)
        fetchData();

    },[data]);

Full Code App.js

export default function OrderPreview(props) {

    const classes = useStyles();

    const [data, setData] = useState([]);
    useEffect(() => {

        const fetchData = () => {
            fetch('http://127.0.0.1:8000/main/api/')
            .then(response => response.json())
            .then((res) => {
                const data = res.map((item, index) => ({
                    title: item.title,
                    price: item.price,
                    quantity: item.quantity,
                }));
                setData(data);
            });
        };

        console.log(data)
        fetchData();

    },[data]);

    return (
        <main className={clsx(classes.content, {
                [classes.contentShift]: props.openstate, })}>
            <Grid container >
                <Grid item sm={12} >
                    <TableContainer className={classes.tableStyle}>
                        <Table>
                            <TableHead>
                                <TableRow>
                                    <TableCell align='center' >#</TableCell>
                                    <TableCell style={{paddingLeft:'90px'}} >Name</TableCell>
                                    <TableCell align='center' >Quantity</TableCell>
                                    <TableCell align='center' >Price</TableCell>
                                </TableRow>
                            </TableHead>
                            <TableBody >
                                {data.map((item, index) => (
                                    <TableRow key={index}>
                                        <TableCell align='center' >{index + 1}</TableCell>
                                        <TableCell style={{paddingLeft:'90px'}} >{item.title}</TableCell>
                                        <TableCell align='center' >{item.quantity}</TableCell>
                                        <TableCell align='center' >$ {item.price * item.quantity}</TableCell>
                                    </TableRow>


                                ))}
                                <TableCell colSpan={3} align='right' style={{paddingRight:'20px'}}> Total Price</TableCell>
                                <TableCell align='center' > non </TableCell>
                            </TableBody>
                        </Table>
                    </TableContainer>
                </Grid>
            </Grid>
        </main>
    );


}

Answer

If you don’t want to keep fetching API, just remove data in the dependency array.

You are having setData(data); inside your useEffect so it will just keep running re-render over again result in useEffect and setData(data).

useEffect(() => {
  const fetchData = () => {
    fetch("http://127.0.0.1:8000/main/api/")
      .then((response) => response.json())
      .then((res) => {
        const data = res.map((item, index) => ({
          title: item.title,
          price: item.price,
          quantity: item.quantity,
        }));
        setData(data);
      });
  };

  console.log(data);
  fetchData();
}, []); // <-- REMOVE DATA HERE