Clickoutside about react-hooks

[otakustay]

Yes absolutely, I will fix it soon

[otakustay]

I have further looked into this issue, useDocumentEvent does not require listener function to be reference equal, and it should never requires that since document is not a react controlled element, events on document can be stored inside a ref, so current implement is safe.

[otakustay]

I will close this issue since there is no side effect in current implement, discussion can continue here

[lishine]

I have further looked into this issue, useDocumentEvent does not require listener function to be reference equal, and it should never requires that since document is not a react controlled element, events on document can be stored inside a ref, so current implement is safe.

What do you mean by safe?
The reason I am suggesting useCallback is so that this function won't be recreated on each render...

[otakustay]

Yes, this function is recreated on each render, but since its underlying useDocumentEvent does not pass the function any react controlled element like <div onClick={testAndTrigger} />, a recreation of function will not trigger more render (or update) in react.

On the other side, we don't have performance benefit from useCallback, for the code like:

useCallback(
  function testAndTrigger() {
  },
  []
);

testAndTrigger is also recreated on each render, useCallback from the second render discards the newly created function and returns a previously cached one. In this case we don't get performance boost to have an extra lookup in a cache.

So my conclusion is that a recreation of function will not make react render or update more times and it will not effect any performance, it is safe to just leave it recreated.

[lishine]

Indeed, you are much right.
In React we may consider potential performance problem in case of callback passing in props and child rerender and then Dom diff, in this case useCallback will help, which is not the case here.
About the second part, interesting point, useCallback actually creates this function anyway every time. BTW useMemo will not autocreate the function :) ()=>()=>{}