5 ms·

There is a new experimental hook, useEffectEvent, whose only discernable functionality based on the documentation and information available is to quiet the lint

by Rapzid 4y ago

There is a new experimental hook, useEffectEvent, whose only discernable functionality based on the documentation and information available is to quiet the linter. I'm not sure that's all it does since I haven't dug into the React source code, but that's what many are speculating.

andrewingram 4y ago
[Edit: this is all wrong, see comment tree] It makes it so that the same instance of a function is used for all renders, but that it always points to the data closed over by the latest render; it eliminates a whole class of scenarios that normally lead to gnarly dependency array tomfoolery with useCallback, useMemo and useEffect. It's quite a common hook to try to invent in user-land (i've seen it in numerous projects), it's not just a linter silencer.
- Rapzid 4y ago
  > but that it always points to the data closed over by the latest render It's my understanding that this was to be the behavior of the canceled useEvent hooks but that the new useEffectEvent hook does not return a stable reference. Do you have sources for the behavior of the new hook?
  - andrewingram 4y ago
    https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event https://react.dev/learn/separating-events-from-effects#decla... > Here, onConnected is called an Effect Event. It’s a part of your Effect logic, but it behaves a lot more like an event handler. The logic inside it is not reactive, and it always “sees” the latest values of your props and state.
    - Rapzid 4y ago
      A bare closure would always see the latest values because it closes over them during render. And the latest useEffect closure will have closed over that method.. Here is the test suite for useEffectEvent and the test ensuring it does not provide a stable reference: https://github.com/facebook/react/blob/main/packages/react-reconciler/src/__tests__/useEffectEvent-test.js#L609 https://github.com/facebook/react/blob/main/packages/react-r...
      - andrewingram 4y ago
        You're right, i'll redact/edit. Hm, this doc page is exceptionally confusing. Edit: So it's kind of interesting, this test (and the functionality behind it) exists specifically to make sure you can't rely on it having a stable identity -- and therefore have to omit it from the dependency array. But it otherwise behaves the same as the popular user-land implementation involving refs (which you still have to include in the dependency array, because it works by providing a stable identity). So there's some internal trickery in React to make sure that even though the effect event is recreated and has a new identity on every render, any time it's invoked you're accessing the latest inner callback.
robby_w_g 4y ago
As far as I can tell, useEffectEvent is just the useEvent hook but renamed to reduce scope. useEvent was originally going to provide performance optimizations when creating event handlers in a function component and it was going to solve the issue of event handlers causing effects to re-fire[1]. Now it's just going to focus on the effect issue. [1] https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md#useeffect-shouldnt-re-fire-when-event-handlers-change https://github.com/reactjs/rfcs/blob/useevent/text/0000-usee...

by Rapzid 4y ago

andrewingram 4y ago

[Edit: this is all wrong, see comment tree] It makes it so that the same instance of a function is used for all renders, but that it always points to the data closed over by the latest render; it eliminates a whole class of scenarios that normally lead to gnarly dependency array tomfoolery with useCallback, useMemo and useEffect. It's quite a common hook to try to invent in user-land (i've seen it in numerous projects), it's not just a linter silencer.

Rapzid 4y ago
> but that it always points to the data closed over by the latest render It's my understanding that this was to be the behavior of the canceled useEvent hooks but that the new useEffectEvent hook does not return a stable reference. Do you have sources for the behavior of the new hook?
- andrewingram 4y ago
  https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event https://react.dev/learn/separating-events-from-effects#decla... > Here, onConnected is called an Effect Event. It’s a part of your Effect logic, but it behaves a lot more like an event handler. The logic inside it is not reactive, and it always “sees” the latest values of your props and state.
  - Rapzid 4y ago
    A bare closure would always see the latest values because it closes over them during render. And the latest useEffect closure will have closed over that method.. Here is the test suite for useEffectEvent and the test ensuring it does not provide a stable reference: https://github.com/facebook/react/blob/main/packages/react-reconciler/src/__tests__/useEffectEvent-test.js#L609 https://github.com/facebook/react/blob/main/packages/react-r...
    - andrewingram 4y ago
      You're right, i'll redact/edit. Hm, this doc page is exceptionally confusing. Edit: So it's kind of interesting, this test (and the functionality behind it) exists specifically to make sure you can't rely on it having a stable identity -- and therefore have to omit it from the dependency array. But it otherwise behaves the same as the popular user-land implementation involving refs (which you still have to include in the dependency array, because it works by providing a stable identity). So there's some internal trickery in React to make sure that even though the effect event is recreated and has a new identity on every render, any time it's invoked you're accessing the latest inner callback.

robby_w_g 4y ago

As far as I can tell, useEffectEvent is just the useEvent hook but renamed to reduce scope. useEvent was originally going to provide performance optimizations when creating event handlers in a function component and it was going to solve the issue of event handlers causing effects to re-fire[1]. Now it's just going to focus on the effect issue. [1] https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md#useeffect-shouldnt-re-fire-when-event-handlers-change https://github.com/reactjs/rfcs/blob/useevent/text/0000-usee...