New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove ref in render antipattern in animated docs #4200

Merged

poteto merged 1 commit into main from poteto-patch-1

Oct 30, 2024

Commits on Oct 30, 2024

Remove ref in render antipattern in animated docs

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 committed Oct 30, 2024