How To Use Hooks In Correct Way?

I have some issue 1- I defined a function that gets data from API and calling it in useEffect, It's work well But i got this warning in VScode. React Hook React.useEffect has a mi

Solution 1:

For Issue 1:

• either add the dependency to the array:

  React.useEffect(() => {
    getOpenOrders();
  }, [currentPage, getOpenOrders]);
  

• or use eslint rule as answered by @Matt Aft, It wont make a difference for your usecase

For issue 2: I would suggest removing duplicates with a Set:

setOpenedAppointment((prevOpenedOrders) =>Array.from(newSet([...prevOpenedOrders, ...allOpenedOrders]))
    );

This will concat your new Orders and your old Orders with spread syntax (...) and will remove duplicates by creating a new Set. (Sets allow only unique items, therefore will remove duplicates. Then you convert it back to an Array with Array.from so you can use it as before

Solution 2:

I think you're missing the spread operator on the second array:

setOpenedAppointment((prevOpenedOrders) =>[...prevOpenedOrders, ...allOpenedOrders]);

also issue 1 is because of the react-hooks/exhaustive-deps rule you have enabled, basically there are two ways you can fix this:

1. wrap getOpenOrders in a useCallback and add it to the dep array in the useEffect
2. disable the linter for that line

React.useEffect(() => {
   getOpenOrders();
 // eslint-disable-next-line react-hooks/exhaustive-deps
 }, [currentPage]);