Effects vs Events

Many "side effects" should actually be event handlers. Effects are for synchronizing with something outside React — not for reacting to user actions.

4 min read Level 3/5 #react#useEffect#events

What you'll learn

Recognize when an event handler is the right tool
Avoid the "set state, then sync it" effect pattern

A trap newcomers fall into: putting everything in useEffect. Effects are for syncing with the outside world (the DOM, the network, the browser, a third-party library). User actions belong in event handlers.

The Mental Model

Tool	For what
Handler	”When the user does X, do Y”
Effect	”Whenever this state matches reality, keep the outside world in sync”

The Anti-Pattern

// ✗ Two state slots, one effect that copies
function Profile({ user }) {
  const [name, setName] = useState("");

  useEffect(() => {
    setName(user.name);   // syncs state from a prop
  }, [user.name]);

  return <p>{name}</p>;
}

This causes an extra render (one for the prop change, another for the state update). Just derive:

function Profile({ user }) {
  return <p>{user.name}</p>;
}

Submit Logic Belongs In The Handler

// ✗ Effect-driven submit
function Form() {
  const [submitted, setSubmitted] = useState(false);
  const [values, setValues] = useState({});

  useEffect(() => {
    if (submitted) send(values);
  }, [submitted]);

  function handleSubmit() {
    setSubmitted(true);
  }
}

// ✓ Submit in the handler, where it actually happens
function Form() {
  const [values, setValues] = useState({});

  function handleSubmit(e) {
    e.preventDefault();
    send(values);
  }
}

The user clicking Submit is an event, not a state to synchronize.

When Effects Are Right

Effects shine when you need to:

Set up subscriptions / listeners / timers
Sync the document title or URL with state
Call into a third-party library that needs to know about state
Fetch data when an ID changes

Each of these is “keep something OUTSIDE React in sync with what’s inside”.

Rule Of Thumb

Ask: “Is this work caused by a specific user action?” If yes → event handler. If it’s “whenever this state happens to be X, something out there should match” → effect.

A Quick Checklist

Before you reach for useEffect, ask:

Can I compute this during render? (Derived state)
Does this happen because the user did something? (Event handler)
Am I copying state from one place to another? (Lift it up instead, or use props directly)

If “no” to all three — yes, you want an effect.

Up Next

Fetching is the most common legitimate effect. Time to do it well.

Data Fetching →