In React, to listen to state changes in functional components, the recommended way is to use the useEffect hook. React does not provide a direct observer-like system for watching state changes — instead, you can react to them with side effects.

1. Use useEffect to Listen to State Changes

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

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

  // Listen to state change of 'count'
  useEffect(() => {
    console.log(`Count changed to: ${count}`);
  }, [count]); // dependency array includes 'count'

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

How it works:

• useEffect runs after every render where the count value has changed.
• The dependency array [count] tells React to only run the effect when count changes.

2. Listen to Multiple State Changes

useEffect(() => {
  console.log(`State changed: name=${name}, age=${age}`);
}, [name, age]);

You can listen to any combination of state or props by listing them in the dependency array.

3. Listen to Any Re-render (Optional)

If you want to run code after every render (regardless of which state changed):

useEffect(() => {
  console.log('Component re-rendered');
});

This runs on every render, so use with care.

4. Common Mistake: Omitting Dependency Array

If you omit the array entirely:

useEffect(() => {
  console.log('Always runs after render');
});

It runs after every render, even when state hasn’t changed — which might cause unnecessary operations.