i find a code that show loading before fetching data and shows "downloaded " after the fetching is ended the code is working ,however i couldn't understand how this code is working for my understanding the useEffect() will run one time when the app start and usestate() will rerender the component every time loading value changed so ,in the beginning of the code the useeffect() will run ,and setloading willchange the value to true and rerender the component ,for my point of vue it look like there is infinite loop of rendering can someone please explaine how usestate worke inside of useffect and how this code is working. this is the code:

import { useState } from "react";
import { useEffect } from "react";
export default function Assemble(){
const [loading,setloading]=useState(true);
useEffect(()=>{
   setloading(true);
      fetch('https://jsonplaceholder.typicode.com/photos')
  .then(response => response.json())
  .then(json => console.log(json))
  setloading(false);
},[])
   return(<div>
      <div>{loading?"Loading":"downloaded"}</div>
   </div>)
} ```