Avoid adding unnecessary dependencies to useEffect-CodePudding

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

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

useEffect for searchText change and API call:

 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

CodePudding user response：

For useEffect, here is the mindset: "Everything that's defined outside of me, and that my callback function uses, need 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 choice about what should be in that array. You could do it like so:

 useEffect(() => {
    if (currentOrg) {
      dispatchGetSubOrgs(
        dispatch,
        currentOrg.id,
        noOfRecords,
        currentPage, // I get these from redux store and get updated when API calls
        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, so you should be careful. However useEffect will work fine, as you decided it should.

CodePudding user response：

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]