How to show loading state in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Displaying loading states is crucial for providing visual feedback to users during asynchronous operations like API calls or data fetching in React applications.
As the creator of CoreUI, a widely used open-source UI library, I’ve implemented loading states in countless production components over 25 years of development.
From my expertise, the most effective approach is using useState to track loading status combined with conditional rendering to display appropriate UI.
This creates a smooth user experience that keeps users informed about ongoing operations.
Use useState to track loading status and conditionally render loading UI.
const [loading, setLoading] = useState(false)
return loading ? <div>Loading...</div> : <div>Content loaded</div>
Here the loading state boolean controls what content is rendered. When loading is true, a loading message displays. When false, the actual content appears. Set setLoading(true) before starting async operations and setLoading(false) when they complete to provide real-time feedback to users about the application’s state.
Best Practice Note:
This is the same loading pattern we use in CoreUI components for data tables and form submissions. Consider using loading spinners or skeleton loaders instead of plain text for a more polished user experience, and always handle error states alongside loading states.
