Using the useMemo() hook in React is causing my function to be a step behind

Question

I am using the useMemo hook return and filter an array of items. I then have a toggle function that toggles whether an item is true or false and then posts that item back to an API if it is true or false and adds it to a list. Within the function, which using the useReducer hook, the array is one step behind. For instance, the array of items gets returned and you toggle whether they are on sale or not, and if you toggle true they get added to the saleList and if they get toggled to not on sale they get added to notSaleList. In the function the saleList length will come back as 3 but it is really 4, then you remove a home to make it 3 but it will return 4. Does anybody know why that would be thanks?

const homesReducer = (state, action) => {
  switch (action.type) {
    case 'FETCH_INIT':
      return {
        ...state,
        isLoading: true,
        isError: false,
      };
    case 'FETCH_SUCCESS':
      //action.payload to object
      const entities = action.payload.reduce((prev, next) => {
        return { ...prev, [next.Id]: next };
      }, {});
      return {
        ...state,
        isLoading: false,
        isError: false,
        homes: entities,
      };
    case 'FETCH_FAILURE':
      return {
        ...state,
        isLoading: false,
        isError: true,
      };
    case 'TOGGLE_SALE_HOME_INIT':
      return {
        ...state,
        homes: {
          ...state.homes,
          // ask Jenkins
          [action.payload]: {
            ...state.homes[action.payload],
            IsSaleHome: !state.homes[action.payload].IsSaleHome,
          },
        },
      };
    case 'TOGGLE_SALE_HOME_SUCCESS':
      return {
        ...state,
      };
    case 'TOGGLE_SALE_HOME_FAILURE':
      // TODO update back if failed
      return {
        ...state,
        homes: {
          ...state.homes,
          // ask Jenkins
          [action.payload]: {
            ...state.homes[action.payload],
            IsSaleHome: !state.homes[action.payload].IsSaleHome,
          },
        },
      };  
    default:
      return { ...state };
  }
};

const useOnDisplayApi = activeLotNumber => {
    const [state, dispatch] = useReducer(homesReducer, {
      isLoading: false,
      isError: false,
      homes: [],
      saleHomes: [],
     });

     const homes = useMemo(() => {
       return Object.keys(state.homes).map(id => {
       return state.homes[id];
     });
      }, [state.homes]);
     }

     const saleHomes = useMemo(() => {
       return homes.filter(home => {
       return home.IsSaleHome;
     });
     }, [homes]);

     const notSaleHomes = useMemo(() => {
       return homes.filter(home => {
       return !home.IsSaleHome && !home.IsSuggestedSaleHome;
      });
     }, [homes]);

    const toggleSaleHome = async (home, undo = true) => {
    dispatch({ type: 'TOGGLE_SALE_HOME_INIT', payload: home.Id });
    try {
      const didUpdate = await updateInventory(
        activeLotNumber,
        home.InventoryId,
        {
          InventoryId: home.InventoryId,
          IsSaleHome: !home.IsSaleHome,
        }
      );
      if (didUpdate == true) {
        dispatch({ type: 'TOGGLE_SALE_HOME_SUCCESS' });
      } 
      else {
          dispatch({ type: 'TOGGLE_SALE_HOME_FAILURE', payload: home.Id });
      }
    } catch (error) {
      setTimeout(() => {
        dispatch({ type: 'TOGGLE_SALE_HOME_FAILURE' });
      }, 600);
    }
  };

Answer 1

I ended up fixing my issue by adding an if statement before the 'INIT'.

const toggleSaleHome = async (home, undo = true) => {
    if (saleHomes.length > 9 && !home.IsSaleHome) {
      toast.error(
        <div>
          {`${home.Name} could not be added. You already have selected 10 sale homes.`} 
        </div>,
        {
          className: 'error-toast',
          progressClassName: 'error-progress-bar',
          closeButton: false,
          position: toast.POSITION.BOTTOM_RIGHT,
        }
      );
      return;
    }
    dispatch({ type: 'TOGGLE_SALE_HOME_INIT', payload: home.Id });
    try {
      const didUpdate = await updateInventory(
        activeLotNumber,
        home.InventoryId,
        {
          InventoryId: home.InventoryId,
          IsSaleHome: !home.IsSaleHome,
        }
      );
      if (didUpdate == true) {
        dispatch({ type: 'TOGGLE_SALE_HOME_SUCCESS' });
      } 
      else {
          dispatch({ type: 'TOGGLE_SALE_HOME_FAILURE', payload: home.Id });
      }
    } catch (error) {
      setTimeout(() => {
        dispatch({ type: 'TOGGLE_SALE_HOME_FAILURE' });
      }, 600);
    }
  };

My whole issue was that I was not wanting any more homes to be able to be toggled once they reached 10 and before the 'INIT' the actual state of saleHomes is available, so the saleHomes.length is accurate.

Answer 2

The update after dispatch isn't available immediately and is asynchronous. So your app will go through another render cycle to reflect the update.

You need to use useEffect to call the api after update and not call it on initial render.

const initialRender = useRef(true);
useEffect(() => {
    if(initialRender.current) {
         initialRender.current = false;
    } else {
      try {
          const didUpdate = await updateInventory(
            activeLotNumber,
            home.InventoryId,
            {
              InventoryId: home.InventoryId,
              IsSaleHome: !home.IsSaleHome,
            }
          );
          if (didUpdate == true) {
            dispatch({ type: 'TOGGLE_SALE_HOME_SUCCESS' });
          } 
          else {
              dispatch({ type: 'TOGGLE_SALE_HOME_FAILURE', payload: home.Id });
          }
        } catch (error) {
          setTimeout(() => {
            dispatch({ type: 'TOGGLE_SALE_HOME_FAILURE' });
          }, 600);
        }
    }

}, [home])

const toggleSaleHome = async (home, undo = true) => {
    dispatch({ type: 'TOGGLE_SALE_HOME_INIT', payload: home.Id });
}