Overview

This problem challenges you to build a custom useFetch React hook that elegantly handles data fetching, loading states, and error management. You will create a reusable hook to fetch data from a public API and display it within a simple UI, demonstrating robust error handling and user feedback. This task is ideal for practicing custom hooks, state management, and UI rendering based on async operations.

What you need to do / Task

1. Implement a custom React hook named useFetch.
2. The useFetch hook should accept a URL string as its primary argument.
3. It must return an object containing data, loading (boolean), error (any), and a refetch function.
4. Integrate useFetch into /App.tsx to fetch data from a provided public API endpoint.
5. Display the fetched data (or a relevant subset) in the UI.
6. Show a clear loading indicator while data is being fetched.
7. Display an informative error message if the fetch operation fails, along with a "Retry" button.
8. The "Retry" button should re-attempt the fetch request.

UI/UX expectations

• A main container for the application content.
• A prominent loading message or spinner should appear when loading is true.
• If error is present, display the error message clearly, perhaps in red text, alongside a "Retry" button.
• Once data is successfully fetched, display it in a simple, readable format (e.g., a list of items).
• The "Retry" button should be visible only when an error occurs.

Acceptance criteria

• The useFetch hook is correctly implemented and adheres to React hook rules.
• Data is successfully fetched and displayed in the UI.
• A loading indicator is visible during the data fetching process.
• An error message is displayed when the API request fails (e.g., invalid URL, network error).
• A "Retry" button is available when an error occurs and successfully re-fetches data.
• The UI updates correctly when loading, error, or data changes.

Clarifications

• Q: Which API should I use? A: Use https://jsonplaceholder.typicode.com/posts for fetching a list of posts.
• Q: Should the hook handle POST/PUT/DELETE requests? A: No, focus solely on GET requests for this problem.
• Q: How should I simulate an error? A: You can temporarily change the URL to an invalid one (e.g., https://jsonplaceholder.typicode.com/invalid-endpoint) in /App.tsx to test error states.
• Q: Are external data-fetching libraries allowed? A: No, implement useFetch using native fetch API.