The Most Overused Tool That's Often Unnecessary

The React library would be ideal without useEffect. But since we need to communicate with the outside world, we have it. The main mistake of beginners is sticking it everywhere. Remember: **useEffect is a " rescue code " **, not the main tool.

1. Computed Values (Derived State)

If you need to calculate cart total or filter a list by search:

• ❌ Bad: Create state for the result and update it in useEffect. This causes extra render and slows the site.
• ✅ Good: Calculate everything right in the function body. React is very fast, it easily recalculates 1000 elements on every mouse move.

2. Resetting State: The Magic of the key Attribute

Imagine you have a comment form. You switched from one post to another, but the comment text stayed in the field.

• ❌ Bad: Use useEffect that watches postId and clears the field manually.
• ✅ Good: Give the form a key={postId} attribute. When key changes, React considers this a completely new component. It completely removes the old form from memory and creates a new one " from scratch " with an empty field.

3. Effect vs Event Handler

This is a fundamental question: WHY should this code run?

• Effect: Because the component appeared on screen (or updated). For example, " When page loads, start playing music " .
• Handler: Because a human did something. For example, " When human pressed a button — send message " .
• ❌ Error: On button click change state isSubmitted, and in effect watch isSubmitted and send request. Send the request right in onClick.

4. Double Run in StrictMode

If you see your useEffect running twice in the console — this is not a bug. This is React testing you. In development mode, React specifically mounts, unmounts, and remounts the component. This helps find forgotten cleanup functions. If your code breaks from double run — means you wrote poor cleanup.

Fewer effects — fewer bugs. Always think: " Can I solve this task without useEffect? " . Usually the answer is yes.