What is useEffect and Why Should We Reconsider It?

In React, useEffect is a hook used to handle side effects—operations not directly related to rendering, such as API calls, DOM updates, or setting up timers. However, you don’t always need useEffect. This article encourages you to ask: "Can I do this without an effect?" to keep your code simpler, more readable, and more efficient.

Simply put:

• useEffect is useful, but overusing it can make your code unnecessarily complex.
• In many cases, you can use declarative approaches with state/props instead of imperative approaches with effects.

When You Don't Need useEffect

Here are some common situations where you can avoid useEffect:

1. Synchronizing Data with State (No Effect Needed)

If you only need to compute or update data based on state/props, you can do it directly in the render function instead of using useEffect.

Incorrect:

function Profile({ userId }) {
  const [user, setUser] = useState(null)
 
  useEffect(() => {
    setUser({ id: userId, name: `User ${userId}` }) // Sync user with userId
  }, [userId])
 
  return <p>{user?.name}</p>
}

Problem: useEffect is unnecessary because it only updates state based on props.

Correct:

function Profile({ userId }) {
  const user = { id: userId, name: `User ${userId}` } // Compute directly
  return <p>{user.name}</p>
}

Why: No need for state or effect since user is derived from userId. Rendering updates automatically when userId changes.

2. Adjusting State When Props Change (No Effect Needed)

If you need to change state based on props, do it in an event handler or directly in the render function.

Incorrect:

function Form({ value }) {
  const [inputValue, setInputValue] = useState('')
 
  useEffect(() => {
    setInputValue(value) // Sync input with props
  }, [value])
 
  return <input value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
}

Problem: useEffect creates an unnecessary loop: props change → effect runs → state changes → re-renders.

Correct:

function Form({ value }) {
  const [inputValue, setInputValue] = useState(value) // Initialize from props
  return <input value={inputValue} onChange={(e) => setInputValue(e.target.value)} />
}

Why: Initialize state from props once, then let the user control it via onChange. If reset is needed when props change, use the key technique (see below).

3. Resetting State When Props Change (Use key Instead of Effect)

Instead of using useEffect to resync state, use the key attribute to reset the component.

Incorrect:

function ArticleEditor({ articleId }) {
  const [content, setContent] = useState('')
 
  useEffect(() => {
    setContent('') // Reset when articleId changes
  }, [articleId])
 
  return <textarea value={content} onChange={(e) => setContent(e.target.value)} />
}

Correct:

function ArticleEditor({ articleId, initialContent }) {
  const [content, setContent] = useState(initialContent)
 
  return (
    <textarea
      key={articleId} // Reset when articleId changes
      value={content}
      onChange={(e) => setContent(e.target.value)}
    />
  )
}

Why: When the key changes, React recreates the component with the initial state, eliminating the need for useEffect.

When You Actually Need useEffect

Use useEffect when performing side effects outside of rendering:

• Fetching data from an API.
• Updating the DOM directly (using refs).
• Setting up subscriptions (e.g., WebSocket, timers).

Correct Example:

function NewsList() {
  const [articles, setArticles] = useState([])
 
  useEffect(() => {
    fetch('https://api.example.com/news')
      .then((res) => res.json())
      .then((data) => setArticles(data))
  }, [])
 
  return articles.map((a) => <p>{a.title}</p>)
}

Why: Fetching data is a side effect that cannot be done during rendering.

Common Mistakes with useEffect

Mistake: Using Effect for Computation

function TotalViews({ articles }) {
  const [total, setTotal] = useState(0)
 
  useEffect(() => {
    setTotal(articles.reduce((sum, a) => sum + a.views, 0))
  }, [articles])
 
  return <p>Total views: {total}</p>
}

Fix: Compute directly:

const total = articles.reduce((sum, a) => sum + a.views, 0)
return <p>Total views: {total}</p>

Mistake: Unnecessary State Synchronization

function Counter({ initialCount }) {
  const [count, setCount] = useState(0)
 
  useEffect(() => {
    setCount(initialCount)
  }, [initialCount])
}

Fix: Use initial state:

const [count, setCount] = useState(initialCount)

Why Avoid Overusing useEffect?

• More complex code: Unnecessary effects make code harder to read and maintain.
• Performance issues: Effects run after rendering, potentially causing delays or infinite loops.
• Not leveraging React’s strengths: React is powerful in declarative state/props handling, which often eliminates the need for effects.

Conclusion

"You Might Not Need an Effect" encourages you to prioritize declarative approaches (state, props, direct calculations) instead of relying on useEffect for everything. Only use effects for real side effects (API calls, DOM updates, subscriptions). In a news website example, you can filter articles and reset forms without useEffect, leading to cleaner and more efficient code.