避免向 useEffect 添加不必要的依赖项

Question

I am using react table in my app with server side pagination with search. Whenever pagination changes I use onPaginationChange prop to call API. But I also have a search input text. For this I use useEffect to listen to search text changes and call API.

<Pagination 
    onPaginationChange={(pageSize, pageNo) => {
        setNoOfRecords(pageSize);
        dispatchGet(
            dispatch,
            currentOrg.id,
            pageSize,
            pageNo,
            searchText,
        );
    }} //this is ok
/>

I also have a searchText state and useEffect for searchText change and API call:

const [searchText, setSearchText] = useState("");

useEffect(() => {
    if (currentOrg) {
        dispatchGetSubOrgs(
            dispatch,
            currentOrg.id,
            noOfRecords,
            currentPage, // I get these from redux store and get updated when API calls
            searchText,
        );
    }
}, [searchText]);

Here Eslint complains that I need to add currentPage to dependency array. But if I add it and onPaginationChange gets called due to some pagination changes, currentPage will be updated and useEffect gets called and will call the API twice.

If I ignore this Eslint error, will it be a problem? Also, I don't know why React wants me to add everything in dependency array. What if I don't want the useEffect to run when something in the dependency array changes? I'm forced to add it because it might have stale values. How do I deal with this?

Answer 1

For useEffect , here is the mindset: "Everything that's defined outside of me, and that my callback function uses, needs to be in my dependencies' array, so I know when I ask the callback to execute again".

That's how Eslint sees things. But you as developer can make your own choices about what should be in that array. You can turn off those warnings with the help of eslint-disable-next-line react-hooks/exhaustive-deps , like so:

 useEffect(() => {
    if (currentOrg) {
      dispatchGetSubOrgs(
        dispatch,
        currentOrg.id,
        noOfRecords,
        currentPage,
        searchText,
      );
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [searchText]

But you have to know that, doing so systematically might create bugs in the futur, as you loose those warnings. However useEffect will work fine, as you decided it should.

Answer 2

you can add the following comments at the end of the code

       if (currentOrg) {
         dispatchGetSubOrgs(
           dispatch,
           currentOrg.id,
           noOfRecords,
           currentPage, 
           searchText,
         );
       }
   // eslint-disable-next-line react-hooks/exhaustive-deps    
     }, [searchText]