Remove ref in render antipattern in animated docs #4200
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
✅ Deploy Preview for react-native ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for react-native ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Isn't useAnimatedValue also reading ref.current in render? https://github.com/facebook/react-native/blob/8b2ccea243d8b8156d6f6e1e3e08b6064f82ed84/packages/react-native/Libraries/Animated/useAnimatedValue.js#L24 |
poteto
force-pushed
the
poteto-patch-1
branch
from
5527857
to
fe4ace8
Compare
poteto
changed the title
Yeah that's true. But updating the docs means that we can remove a Rule of React violation from user code, so if React Compiler is being used these components/hooks can still be compiled, while the offending useAnimatedValue will not (if we compile it). |
poteto
force-pushed
the
poteto-patch-1
branch
5 times, most recently
from
67733f9
to
5856434
Compare
poteto
force-pushed
the
poteto-patch-1
branch
from
5856434
to
0e3d1c9
Compare
Reading or writing to a ref in render is a [rule of React violation](https://react.dev/reference/react/useRef). This PR updates the docs for animated to use the `useAnimatedValue` hook instead, which does use a ref under the hood but isolates the rule of React violation to just that hook. This allows users that follow code examples for animated to have their components and hooks be compilable by React Compiler. This hook was added in [0.71](https://github.com/facebook/react-native/blob/main/CHANGELOG.md#:~:text=Introduce%20useAnimatedValue%20hook%20to%20make%20it%20easier%20working%20with%20Animated.Values%20in%20function%20components.%20(e22217fe8b%20by%20%40fabriziocucci)) so I'm also updating versioned docs from 0.71 onwards.
poteto
force-pushed
the
poteto-patch-1
branch
from
0e3d1c9
to
f6728c4
Compare
poteto
added a commit
that referenced
this pull request
Oct 30, 2024
I missed a few examples in #4200 where the example expo sandboxes were broken due to useAnimatedValue not being exported on web.
poteto
added a commit
that referenced
this pull request
Oct 30, 2024
I missed a few examples in #4200 where the example expo sandboxes were broken due to useAnimatedValue not being exported on web.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Reading or writing to a ref in render is a rule of React violation. This PR updates the docs for animated to use the
useAnimatedValuehook instead, which does use a ref under the hood but isolates the rule of React violation to just that hook.This allows users that follow code examples for animated to have their
components and hooks be compilable by React Compiler.
This hook was added in
0.71
so I'm also updating versioned docs from 0.71 onwards.