How do you fetch data in a React component with useEffect?

React hooks and effects · Freshers and experienced

Model answer

Start the request inside the effect, store the result in state, and track loading and error states. Add an AbortController or an ignore flag in cleanup so a slow old response cannot overwrite a newer one.

For real apps, a library such as TanStack Query handles caching, retries and race conditions, so you write much less effect code.

Learn this topic

React useEffect Explained: Side Effects, Dependencies and Cleanup in the course React.js Full Course: Beginner to Advanced.

Sign in to add your own answer.

More questions

• What are hooks, and what are the rules of hooks?
• What does useEffect do?
• What does the dependency array of useEffect mean?
• Why does an effect run twice in development?
• What is the cleanup function in useEffect, and when does it run?
• What are race conditions in effects and how do you prevent them?