You Probably Don’t Need useEffect (Most of the Time)

React developers (including me) often reach for useEffect way too early
But the truth is simple: most logic in your app does not belong inside an Effect at all.

useEffect is not a data-management tool.
It's a synchronization tool a bridge between React and the outside world.

Here's the rule that changed how I write React:

If something can be expressed with state, props, or pure calculations, don't use an Effect.
Use useEffect only when you need to sync with something external to React.

Let's break it down with real examples.

---

1. Derived State? No Effect Needed.

Bad: mirroring values into another state.

const [first, setFirst] = useState("Taylor");
const [last, setLast] = useState("Swift");
const [full, setFull] = useState("");

useEffect(() => {
  setFull(first + " " + last);
}, [first, last]);

Better: compute during render.

const full = `${first} ${last}`;

If React can calculate it, you don't need an Effect.

---

2. Filtered Lists? Still No Effect.

Unnecessary Effect:

const [visible, setVisible] = useState([]);

useEffect(() => {
  setVisible(items.filter(i => i.done));
}, [items]);

Correct approach:

const visible = items.filter(i => i.done);

If performance matters, wrap it in useMemo not an Effect.

---

3. User Actions Should Not Trigger Effects

A very common anti-pattern:

const [submitted, setSubmitted] = useState(false);

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

The intention is simple: when the user submits, send data
But this should happen inside the event handler:

function handleSubmit(e) {
  e.preventDefault();
  sendToServer();
} 

No Effects for user-triggered actions.

---

4. Resetting State When a Prop Changes

Some developers do this:

useEffect(() => {
  setText("");
}, [userId]);

Better: use a key so React remounts the component cleanly.

<CommentForm key={userId} />

Cleaner. More predictable.

---

So... When Should You Use useEffect?

Only for real side effects meaning, things React cannot do on its own:

• Fetching from APIs

• Subscribing to WebSocket or event listeners

• Working with timers

• Syncing with localStorage or URL

• Integrating with third-party libraries (charts, modals, etc.)

• Manually touching the DOM

If the logic doesn't touch the outside world, it probably doesn't belong in an Effect.

---

The Humble Takeaway

I used to sprinkle useEffect everywhere
It made my components harder to reason about, harder to test, and easier to break.

Once I started asking "Can React derive this without an Effect?",\
my code became simpler, smaller, and way more predictable.

Most of the time, the answer is yes.

you can find more information here.