Stop Using useEffect Like This: 5 Patterns That Are Silently Breaking Your React App

The pattern you're referring to is a common mistake in React development where useEffect hook is used for logic that doesn't involve side effects. In this context, "side effect" refers to actions like API calls, DOM manipulation, or other operations outside the component's state and props.

Problem Explanation

In your example:

jsx
 
1// ❌ This isn't a side effect, it's just logic
2useEffect(() => {
3  if (items.length === 0) {
4    setIsEmpty(true);
5  }
6});

The code inside useEffect is simply setting state based on the component’s props or state (items). There are no actual side effects happening here. This kind of logic should be handled directly within the component's render function, not in a lifecycle method like useEffect.

Correct Approach

Instead of using useEffect, you can handle this condition directly in your component's functional logic:

jsx
 
1function MyComponent({ items }) {
2  const isEmpty = items.length === 0;
3
4  return (
5    <div>
6      {isEmpty ? 'No items found.' : 'Items are present'}
7    </div>
8  );
9}

Why This is Better

1. **

Read the full article at DEV Community

---

Want to create content about this topic? Use Nemati AI tools to generate articles, social posts, and more.