Why setting the state inside a fetch callback (doesn’t) cause an infinite loop?

I have the following code snippet, and I expected it to result in an infinite loop due to a state update inside a fetch callback inside the body of the component without using ‘useEffect’. However, it’s not behaving as expected. Here’s the code:

function App() {
  const [cartContent, setCartContent] = useState(null);

  fetch("https://fakestoreapi.com/carts/6")
    .then((resp) => resp.json())
    .then((data) => {
      setCartContent("test");
    });

  console.log(cartContent);

  return <div className="cartContent">{cartContent}</div>;
}

export default App;

My understanding was that console.log(cartContent) should log the initial value of cartContent, then when setCartContent(“test”) is called inside the fetch callback, it should log “test”, and this process should repeat indefinitely, creating an infinite loop.

Could someone please help me understand why this code doesn’t result in an infinite loop as expected? Any insights or explanations would be greatly appreciated. Thank you!