Why ESLint Hates Your useEffect Dependencies

Why ESLint Hates Your useEffect Dependencies

And what you can do about it

Are you a React developer? Do you use Hooks and functional components? Do you use ESLint to ensure your code does not do anything spooky? If yes, then I am sure that you have run into the exhaustive-deps ESLint warning while using useEffect.

The error

Have you seen this error before?

In this article, we will take a look at when this warning is triggered and the proper way to get around it.

When Does ESLint Trigger This Warning?

In order to understand when the exhaustive-deps warning is triggered, let’s look at some code:

function Profile ({ userId }) {
  const [profileData, setProfileData] = useState(null)
  const loadCurrentUserProfile = () => {
    requestProfileData(userId).then(setProfileData)
  }
  useEffect(() => loadCurrentUserProfile(), [ userId ])
  return (
    <ProfileView
      data={profileData}
      onRefresh={loadCurrentUserProfile}
    />
  )
}

The useEffect in the code above loads a user’s profile data whenever the ID of the user whose profile is to be displayed changes. Now, let’s put ourselves in ESLint’s shoes and analyze the useEffect call.

The useEffect from ESLint’s perspective

  • Whenever the userId changes, load the profile.
  • But wait! What if the implementation of the way that we must load the profile changes?
  • I must warn the user!

When you look at it from ESLint’s perspective, it does make sense! We know that the implementation of loadCurrentUserProfile does not change in this case, but ESLint does not. However, ESLint is correct here. In a way, if userId changes, the implementation of loadCurrentUserProfile (or the way loadCurrentUserProfile loads data) changes. This is because loadCurrentUserProfile is bound to userId.

We circumvented this little detail and made the useEffect work by adding userId directly in the dependency array. This concept will become clearer in a bit, so bear with me.

programming javascript react reactjs

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Increase Performance of React Applications Via Array JavaScript Methods

Increase Performance of React Applications Via Array JavaScript Methods. We will create a simple event management application in the react to add, update, and delete an event.

ReactJS: The Javascript Developer’s Guide

This article will walk you through the concepts you would need to know to step into the world of widely used ReactJS.

Forms of Composition in JavaScript and React

One of the core ideas in functional programming is composition: building larger things from smaller things. The canonical example of this idea should be familiar with legos.

The Ugly Side of React Hooks

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.