这个详尽的 eslint 规则是否正确？

Question

I know that there are many existing questions about the exhaustive-deps Eslint rule. However, my question is about a very specific case, so I think it has a place here.

The situation:

On a user's profile page, I show posts they've made to the website:

const [postedResources, setPostedResources] = useState<Resource[] | null>(null);

[...]

useEffect(() => {
  async function loadPostedResources() {
      setPostedResourcesLoadingError(false);
      if (!postedResources) setPostedResourcesLoading(true);
      try {
          const response = await TutHubApi.fetchResourcesPostedByUser(profileUser._id, postedResourcesCurrentPage);
          setPostedResources(response.resources);
          setPostedResourcesTotalCount(response.totalCount);
          setPostedResourcesPageCount(response.pageCount);
      } catch (error) {
          console.log(error);
          setPostedResourcesLoadingError(true);
      } finally {
          setPostedResourcesLoading(false);
      }
  }
  loadPostedResources();
}, [profileUser, postedResourcesCurrentPage]);

This line:

if (!postedResources) setPostedResourcesLoading(true);

makes the page not show a loading spinner if there are already resources loaded, which is the case when we load another page of results (as opposed to loading the first page when we first open the profile of a user).

Now Eslint warns me to add postedResources as a dependency. But 1. this would cause an infinite loop in useEffect and 2. I absolutely don't see the need to add it. I only want to look at this value the very moment we load the next batch of results.

Am I missing something? Can my current setup cause any bugs I'm not aware of?

Answer 1

Even though it might work in this case, omitting dependencies is generally not recommended, since it might be source of unexpected bugs.

The linter requires this rule to make sure your code will not reference stale values from previous renders.

I would recommend reading this article from Dan Abramov which shows examples of possible problems when omitting dependencies, and also solutions - https://overreacted.io/a-complete-guide-to-useeffect/#dont-lie-to-react-about-dependencies

In this particular example, you might try:

1. Modifying the postedResourcesLoading state to use useReducer hook, which is shown in the article as one of the possibilities.

2. Using approach with useRef hook, described in react docs - https://reactjs.org/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often . This way, you can store the latest state in a ref, and since ref never changes its reference, it is not required to be listed in useEffect dependencies.

const [postedResources, setPostedResources] = useState<Resource[] | null>(null);
const postedResourcesRef = useRef(postedResources);

useEffect(() => {
  postedResourcesRef.current = postedResources;
});

useEffect(() => {
  async function loadPostedResources() {
      setPostedResourcesLoadingError(false);
      if (!postedResourcesRef.current) setPostedResourcesLoading(true);
      try {
          const response = await TutHubApi.fetchResourcesPostedByUser(profileUser._id, postedResourcesCurrentPage);
          setPostedResources(response.resources);
          setPostedResourcesTotalCount(response.totalCount);
          setPostedResourcesPageCount(response.pageCount);
      } catch (error) {
          console.log(error);
          setPostedResourcesLoadingError(true);
      } finally {
          setPostedResourcesLoading(false);
      }
  }
  loadPostedResources();
}, [profileUser, postedResourcesCurrentPage]);