Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Hook useCallback received a function whose dependencies are unknown. Pass an inline function instead

Consider this example:

 let memoizedCb = React.useCallback(
    memoize((param) => () => someFunction(param)),
    []
  );

where memoize is from external library like "fast-memoize". Above code gives warning:

React Hook useCallback received a function whose dependencies are unknown. Pass an inline function instead

I found this thread which if we adapt to my use case would suggest this as solution (if I am not wrong):

const memoizedCb = React.useMemo(
  () => memoize((param) => () => someFunction(param)),
  []
);

What is the warning about? why does useMemo fix this problem?

NOTE: someFunction is defined outside the function component so it is not needed as a dependency.

like image 749
Giorgi Moniava Avatar asked Sep 13 '25 04:09

Giorgi Moniava


1 Answers

It seems the warning is there because useCallback (and also useMemo see below) expect inline function as argument (don't know why though).

So in the solution from the question:

const memoizedCb = React.useMemo(
  () => memoize((param) => () => someFunction(param)),
  []
);

they used useMemo to imitate useCallback functionality while also passing an inline function to useMemo as the warning required:

React Hook useCallback received a function whose dependencies are unknown. Pass an inline function instead


That warning is not specific to useCallback, you get same warning if you just replace useCallback with useMemo in the first example:

 // For testing
 // Gives same warning
 let memoizedCb = React.useMemo(
    memoize((param) => () => someFunction(param)),
    []
 );
like image 104
Giorgi Moniava Avatar answered Sep 14 '25 17:09

Giorgi Moniava