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:
jsx1// ❌ 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:
jsx1function 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
- **
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.

![[AINews] The Unreasonable Effectiveness of Closing the Loop](/_next/image?url=https%3A%2F%2Fmedia.nemati.ai%2Fmedia%2Fblog%2Fimages%2Farticles%2F600e22851bc7453b.webp&w=3840&q=75)



