UseEffect Hook vs Class Components

What are the main differences between using the useEffect hook and class components in React?

The useEffect hook allows you to manage side effects in functional components, while class components use lifecycle methods like componentDidMount and componentDidUpdate.

Can you give me an example of how useEffect is used in a functional component?

Sure! Here's a simple example:

import React, { useEffect, useState } from 'react';

function ExampleComponent() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        document.title = `Count: ${count}`;
    }, [count]);

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>Click me</button>
        </div>
    );
}

How does the cleanup function work in useEffect?

The cleanup function in useEffect is returned from the effect function and is called before the component unmounts or before the effect runs again. It's useful for cleaning up subscriptions or timers.

When should I prefer class components over functional components with hooks?

You might prefer class components if you're working with legacy code or if you need to use certain lifecycle methods that are not easily replicated with hooks. However, functional components with hooks are generally recommended for new development.