Model async UI state explicitly.
Section: Data Fetching Patterns
Track loading, error, and data state
tsx
tsx
const [data, setData] = useState<User[] | null>(null);
const [error, setError] = useState<Error | null>(null);
const [loading, setLoading] = useState(false);Explanation
A simple foundation for robust async UIs before introducing a data library.
Learn the surrounding workflow
Compare similar commands or jump into common fixes when this command is part of a bigger troubleshooting path.
Related commands
Same sheet · prioritizing Data Fetching Patterns
Expose derived async status
Return a status object from custom data hooks.
Custom hook with options object
Prefer options objects for extensible APIs.