feat: add useEventCallback()

[RYOSKATE]

facebook/react#14099 (comment)
Using this function, the following TypeScript error will occur at (0, ref.current).

$ tsc --build tsconfig.json
src/index.ts:10:38 - error TS2695: Left side of comma operator is unused and has no side effects.

10     return useCallback((...args) => (0, ref.current)(...args), []);

For now, change it to ref.current(....args) to avoid this error.

[artem-malko]

Hi @exKAZUu , why did you change useLayoutEffect to useImperativeHandle?

[exKAZUu]

Hi @artem-malko

If we use useLayoutEffect and the callback is outdated (facebook/react#14099 (comment)), it is difficult for us to recognize it.

But, if we use useImperativeHandle and ref.current is null (facebook/react#14099 (comment)), then we can recognize it due to the error where ref.current is null.

(Moreover, Btw, I think the case where ref.current is null is rare because I've never seen the code that the callback is called in useLayoutEffect().)

Note useImperativeHandle solves the problem of useLayoutEffect (facebook/react#14099 (comment)).

So, I believe that the problem of useLayoutEffect is worse than the problem of useImperativeHandle.

How do you think? I just want to employ a better solution. Please let me know your thought!

[artem-malko]

@exKAZUu

I thought, the main problem of useLayoutEffect is facebook/react#14099 (comment) And devs from react-redux have solved that problem with useIsomorphicLayoutEffect.

And the last thing: calling from render: https://reactjs.org/docs/hooks-faq.html#how-to-read-an-often-changing-value-from-usecallback There is a simple solution:

const ref = useRef(() => {
    throw new Error('Cannot call an event handler while rendering.');
  });

As for me, usage of useImperativeHandle in a such context is quite strange and not obviously. May be it is because I am new to this concept (I mean useImperativeHandle).

[exKAZUu]

Thanks! Yeah, useIsomorphicLayoutEffect seems better than useLayoutEffect.
I also agree that useImperativeHandle seems strange. Acutally, I still cannot fully understand the behavior of useImperativeHandle.

I just tested ypresto's example (facebook/react#14099 (comment)).
In the case where the callback is called from useLayoutEffect in a descendant component, useImperativeHandle causes an error, but useLayoutEffect works silently wrongly. So, I chose useImperativeHandle.
(I believe there is no other difference between useImperativeHandle and useLayoutEffect (useIsomorphicLayoutEffect).)

[artem-malko]

@exKAZUu we need a useImperativeHandle specialist here)

If you will add

const ref = useRef(() => {
    throw new Error('Cannot call an event handler while rendering.');
  });

to useLayoutEventCallback, you will see an error: https://codesandbox.io/s/react-useeventcallback-test-mblch

So, it is not silently wrongly now) What do you think?

[exKAZUu]

Sorry, I missed your sample code 😓 I feel your are right. I will test some code including yours and reply.

[artem-malko]

@exKAZUu cool)