Using the useEffect Hook for API Calls in React

Fetch and Display Posts

Create a React component that fetches posts from 'https://jsonplaceholder.typicode.com/posts' using useEffect and displays the titles.

Expected output: A list of post titles displayed after loading completes.

Hint: Use useState for posts and loading states, and fetch data inside useEffect with an empty dependency array.

Add Error Handling

Enhance your posts fetching component to handle and display errors if the API call fails.

Expected output: Error message displayed if fetching posts fails.

Hint: Use try-catch inside the async function and set an error state.

The useEffect callback should not be async because it expects either a cleanup function or nothing to be returned, but async functions return a Promise, which can cause unexpected behavior.

By providing an empty dependency array to useEffect, you ensure the effect runs only once after the initial render, preventing multiple API calls.

You can use a flag or AbortController to cancel ongoing async operations in the cleanup function returned by useEffect to avoid updating state after unmount.