Most React Developers Get This Wrong About useEffect

Source: Dev.to

In React, useEffect is a powerful tool. It lets your component “talk” to things outside of React — like setting up a timer, syncing data with a server, or working with the browser directly (e.g., changing the page title). This is useful when you’re working with external systems.

But many people use useEffect even when they don’t need to. Unnecessary useEffect can:

• Make your code harder to read
• Introduce bugs
• Slow down your app

Let’s understand when you don’t need an useEffect, and what you should do instead.

Don’t Use Effect to Transform Data

Suppose you’re combining first and last names into a full name. You might think of using an Effect to do this:

import { useState, useEffect } from 'react';

function Form() {
  const [firstName, setFirstName] = useState('Taylor');
  const [lastName, setLastName] = useState('Swift');
  // ❌ Unnecessary useEffect
  const [fullName, setFullName] = useState('');

  useEffect(() => {
    setFullName(firstName + ' ' + lastName);
  }, [firstName, lastName]);
}

This is overkill. You’re using an Effect to calculate something that React can do naturally during rendering.

A better way:

function Form() {
  const [firstName, setFirstName] = useState('Taylor');
  const [lastName, setLastName] = useState('Swift');
  // ✅ No Effect needed
  const fullName = `${firstName} ${lastName}`;
}

It’s simpler, faster, and easier to understand. React will automatically re‑render the component when firstName or lastName change, and fullName will be updated.

Don’t Use Effects to Handle User Events

You also don’t need an Effect to update the state after a button click or input change.

Common mistake

function Counter() {
  const [count, setCount] = useState(0);
  const [double, setDouble] = useState(0);
  // ❌ Don't use Effect for derived state
  useEffect(() => {
    setDouble(count * 2);
  }, [count]);

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

Better approach

function Counter() {
  const [count, setCount] = useState(0);
  // ✅ No Effect needed
  const double = count * 2;

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

You only need to store state that changes independently. If you can compute a value from existing state, just compute it.

When Do You Need an Effect?

You need an Effect when you’re dealing with something outside React. Here are some examples:

Fetching Data from an API

useEffect(() => {
  fetch('/api/user')
    .then(res => res.json())
    .then(data => setUser(data));
}, []);

Subscribing to an Event

useEffect(() => {
  function handleResize() {
    setWidth(window.innerWidth);
  }
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);

Setting a Timer

useEffect(() => {
  const id = setInterval(() => {
    console.log('Tick');
  }, 1000);
  return () => clearInterval(id); // Cleanup
}, []);

Summary

Before using useEffect, ask yourself:

• Am I syncing with something outside React?
• Or can I just calculate this during render?

Use state only for data that can’t be calculated. Avoid redundant state and unnecessary Effects. This makes your React code cleaner, faster, and easier to debug.

Quick Reference

Do You Need useEffect?

• Combining two pieces of state – ❌ No
• Updating derived values – ❌ No
• Responding to user clicks – ❌ No
• Fetching data from an API – ✅ Yes
• Setting timers or intervals – ✅ Yes
• Subscribing to external events – ✅ Yes

Let React do the heavy lifting for you — only use Effects when truly needed!