Could useMemo and useCallback have closures (functions) as the last argument?

The current argument order is

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

useEffect(
  () => {
    const subscription = props.source.subscribe();
    return () => {
      subscription.unsubscribe();
    };
  },
  [props.source],
);

and so on.

It makes it the code less readable when the callback spans multiple lines: it is hard to relate the dependencies to the hook.

What if the dependencies could be written as the first argument?

const memoizedValue = useMemo([a, b], () => computeExpensiveValue(a, b));

const memoizedCallback = useCallback(
  [a, b]
  () => {
    doSomething(a, b);
  }
);

useEffect(
  [props.source],
  () => {
    const subscription = props.source.subscribe();
    return () => {
      subscription.unsubscribe();
    };
  }
);

For instance, the last example becomes easier to reason: there’s an effect that is run whenever props.source changes.

AFAIK JavaScript does not yet allow to move the last closure argument out of the function call parenthesis, however, the following formatting might make sense:

useEffect([props.source], () => {
  const subscription = props.source.subscribe();
  return () => {
    subscription.unsubscribe();
  };
});

[bvaughn]

The APIs being discussed have already been released and have been in use for over a year. Changing them would cause a lot of churn throughout the ecosystem. The bar for doing this is be very high (e.g. they are causing runtime errors) rather than a subjective preference about readability.

We appreciate the thought and discussion that went into this issue, but it’s not a change we can make given the impact it would have on thousands of downstream packages and apps.

Thanks for understanding!

[vlsi]

@bvaughn ,

Frankly speaking, I do not see how it causes “runtime errors”. There change to add useMemo(deps, function) is backward-compatible. I see how it might introduce confusion, however, I don’t see how it introduces errors (including runtime ones).

It would be nice if you could prefer having lambdas as the last argument in case the only argument is lambda.