Using dispatch as custom hook dependency re-renders hook repeatedly

[painedpineapple]

I have this custom hook that utilizes dispatch and has it listed as a dependency. Doing this causes the hook to re-run repeatedly when used inside component.

Custom hook:

let useFetchItbs = () => {
  let dispatch = Store.useDispatch();

  React.useCallback1(
    () => {
      dispatch(SetFetchItbsStatus(Loading));
      Js.Promise.(
        Itb.fetchItbs()
        ->then_(
            response => {
              switch (response) {
              | Ok(response) =>
                dispatch(SetItbs(response.data));
                dispatch(SetFetchItbsStatus(Success()));
              | Error(_error) =>
                dispatch(
                  SetFetchItbsStatus(
                    Failure(
                      "There was a problem retriving ITBs at this time.",
                    ),
                  ),
                )
              };
              resolve();
            },
            _,
          )
        ->catch(
            error => {
              Js.log(error);
              dispatch(
                SetFetchItbsStatus(
                  Failure("There was a problem retriving ITBs at this time."),
                ),
              );
              resolve();
            },
            _,
          )
      )
      ->ignore;
    },
    [|dispatch|],
  );
};

Hook being used:

  let fetchItbs = ItbListsStoreHooks.useFetchItbs();

  React.useEffect1(
    () => {
      fetchItbs();

      Some(() => ());
    },
    [|fetchItbs|],
  );

Note that when I use useCallback0 instead of useCallback1 and remove dispatch as a dependency of the hook, it only runs once as expected.

[MargaretKrutikova]

Oh, yes, I looked at the implementation real quick and noticed that it is not memoizing dispatch, so every time you use useDispatch, a new function is created. I will prepare a fix for this 😄

[painedpineapple]

Thank you :)

[MargaretKrutikova]

Published in v2.0.1.