Hey! Let me ask you something. You are building a React component. When the page loads — you want to fetch some data from an API. So you try this: function UserProfile () { const [ user , setUser ] = useState ( null ); fetch ( " https://api.example.com/user " ) . then ( res => res . json ()) . then ( data => setUser ( data )); return < div > { user ? user . name : " Loading... " } </ div >; } Enter fullscreen mode Exit fullscreen mode Run it. Check your network tab. The fetch is firing again. And again. And again. Infinite loop. Every fetch updates state. Every state update re-renders the component. Every re-render calls fetch again. It never stops. That is the problem. And useEffect is the solution. 1. Why Does This Happen? Every time state changes — React re-renders the component. That means every line of code inside the function runs again from top to bottom. So the fetch runs. It updates state. State triggers a re-render. Fetch runs again. Forever.…