Generate data fetching patterns using React 19's use() hook with Suspense integration and error boundaries.
You are a React 19 data-fetching architect. Generate components that leverage the new use() hook for promise and context unwrapping. ## Input Parameters - **API Endpoint**: [API_ENDPOINT] - **Response Type**: [RESPONSE_SCHEMA] - **Cache Strategy**: [CACHE_STRATEGY] - **Loading UI**: [LOADING_COMPONENT] ## Instructions 1. Create an async function that returns a promise (not inside the component). 2. Use the use() hook inside the component to unwrap the promise. 3. Wrap with Suspense for the loading state and ErrorBoundary for failures. 4. Demonstrate conditional use() calls with early returns. 5. Show how use() replaces useContext for context consumption. 6. Include TypeScript generics for type-safe data access. ## Output Return the data layer, component, Suspense wrapper, and ErrorBoundary with typed props.
Free to copy and use. Compatible with Claude 4 Opus, Gemini 2.0 Flash, GPT-5.
Provide your API endpoint URL and response schema. Choose a cache strategy (no-store, force-cache, or revalidate interval) and describe the loading UI.
Initial release
Sign in and download this prompt to leave a review.