Make useEvent return a different reference if event handler should be reattached
#5743
Conversation
## Description This PR resolves the recognition issue of the Reanimated Event handler for the previous Gesture Handler API. This adjustment was necessary due to a modification in the internal property name that was utilized to identify the Reanimated event handler (as seen here: software-mansion/react-native-reanimated#5743). ## Test plan Run this example - https://github.com/software-mansion/react-native-reanimated/blob/main/app/src/examples/DragAndSnapExample.tsx
| initRef.current.updateWorklet(handler); | ||
| const workletEventHandler = initRef.current.workletEventHandler; | ||
| workletEventHandler.updateWorklet(handler); | ||
| initRef.current = { workletEventHandler }; |
There was a problem hiding this comment.
Is there any way that reassignment during render can be avoided? This still violates React's rules — it means a render is "observable" even if it has not been committed. In React, this can happen with newer features like Transitions. If you update state in a Transition, but this Transition has not completed yet, it should not reflect in the user interface. However, assigning a mutable value during rendering and then reading from that value means that the change from an uncommitted Transition render would reflect for any further re-renders (even before this Transition commits — or even if it never ends up being committed).
There was a problem hiding this comment.
@gaearon I think we could reassign with useEffect here, would that be good enough?
As a side note, I'm a bit confused with all these React features. From what you're saying it turns out that now you shouldn't assign to Refs during render - meaning that everything has to be pushed to useEffect. Is this intentional or am I missing some information here?
There was a problem hiding this comment.
It's not really new — in React, rendering is supposed to be pure. This means that the fact that some combination of props/state was rendered should be unobservable and shouldn't influence rendering output of other renders.
Do these look helpful? https://react.dev/reference/rules
There was a problem hiding this comment.
Also here: https://react.dev/reference/react/useRef
There was a problem hiding this comment.
Damn, now I feel stupid 😅
Summary
Currently Reanimated relies on reattaching event handlers on render. However, we give any notice to React that it should occur, because
useEventalways returns the same reference.With these changes, the reference for a given handler will change if it had to be rebuild and components using
memowill get re-rendered.Fixes #5364
Test plan
See added
MemoExample.tsx.