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

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

In React, useEffect is a Hook that allows you to perform side effects in functional components, while class components use lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount.

Can you give me an example of how useEffect works?

Sure! Here's a simple example:

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

function Example() {
  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>
  );
}

This updates the document title every time the count changes.

How do class components handle side effects?

Class components handle side effects using lifecycle methods. For example, you can use componentDidMount to perform actions after the component mounts, and componentDidUpdate to respond to prop or state changes.

Which approach is better for managing state and side effects?

It depends on your use case. Functional components with Hooks like useEffect are generally more concise and easier to read, while class components can be more familiar for those coming from an OOP background.