How do reactive dependencies in the useEffect dependency array affect its execution behavior?

The useEffect hook accepts an optional dependencies argument that accepts an array of reactive values. The dependency array determines when the effect runs. i.e, It makes useEffect reactive to changes in specified values.

How Dependency Array Affects Behavior

1. Empty Dependency Array: **[]**

useEffect(() => {
// runs once after the initial render
}, []);

• Effect runs only once (like componentDidMount).
• Ignores all state/prop changes.

2. With Specific Dependencies: **[count, user]**

useEffect(() => {
// runs after initial render
// AND whenever `count` or `user` changes
}, [count, user]);

• Effect runs on first render, and
• Again every time any dependency value changes.

3. No Dependency Array (Omitted)

useEffect(() => {
// runs after **every** render
});

• Effect runs after every render, regardless of what changed.
• Can lead to performance issues if not used carefully.

React uses shallow comparison of the dependencies. If any value has changed (!==), the effect will re-run.

Note: This hook works well when dependencies are primitives or memoized objects/functions.