How to fetch data in React with fetch API
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Fetching data from APIs is fundamental for building dynamic React applications that display real-time information from external sources. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented countless data fetching patterns in production React components over 25 years of development. From my expertise, the most reliable approach is using the native fetch API inside useEffect with proper cleanup and error handling. This ensures data loads when components mount and prevents memory leaks from cancelled requests.
Use fetch API inside useEffect to load data when component mounts.
const [data, setData] = useState(null)
const [loading, setLoading] = useState(true)
useEffect(() => {
fetch('/api/users')
.then(response => response.json())
.then(setData)
.finally(() => setLoading(false))
}, [])
Here useEffect runs the fetch request when the component mounts, using the empty dependency array []. The fetch promise chain converts the response to JSON and updates the data state. The finally() block ensures loading state is cleared regardless of success or failure, providing consistent UI feedback.
Best Practice Note:
This is the same data fetching pattern we use in CoreUI React components for reliable API integration. Always handle loading and error states, and consider implementing request cleanup with AbortController to prevent memory leaks when components unmount during pending requests.
