Introduction to the useEffect Hook in React

Implement a Data Fetching Effect

Create a React component that fetches data from an API using useEffect and displays it.

Expected output: Component displays fetched data and updates on mount.

Hint: Use fetch inside useEffect and update state with the response.

Use useEffect Cleanup

Create a component that sets up an interval timer in useEffect and cleans it up properly.

Expected output: Timer logs messages while mounted and stops after unmount.

Hint: Return a cleanup function that clears the interval.

useEffect lets you perform side effects in functional components, such as data fetching, subscriptions, or manually updating the DOM, replacing lifecycle methods in class components.

The dependency array tells React when to re-run the effect: no array runs after every render, an empty array runs once on mount, and specific dependencies cause the effect to run when those values change.

The cleanup function is used to clean up resources like subscriptions or timers before the component unmounts or before the effect runs again, preventing memory leaks.