useEffect and API Calls

The useEffect Hook

Run side effects after render. An empty dependency array runs once; listed values re-run the effect when they change.

useEffect(() => { fetchUsers(); }, []);
useEffect(() => { log(count); }, [count]);

Cleanup and Abort

Return a cleanup function; abort in-flight fetches with AbortController to avoid setting state on unmounted components.

API Service Layer

Keep HTTP in services/api.js: base URL, auth headers, 401 refresh, typed responses. Components stay focused on UI.

Key Points

• Show loading, error and empty states.
• Prefer async/await with try/catch.
• Centralize API logic for testability.