-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
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.
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
feat: Add react-compiler safe API to mutables #6312
Conversation
10fa7e2
to
df2d534
Compare
@tjzel I have few questions about this approach - I can not write comments in original thread discussion, so will drop them here if you don't mind 😅
|
Hey there @kirillzyusko! React Compiler isn't recommended to roll-out for production yet. This API is an anticipation step made with cooperation with Meta. We want to meet the standards of React 19 already so the community can embrace it seamlessly when it launches.
We don't have such plans. Some time ago we decided to follow a stricter approach with version compatibility in Reanimated. This is why we think we shouldn't backport these changes to older versions of Reanimated - their supported versions of React Native aren't meant to work with the Compiler.
I don't think it's a good idea to use older versions of Reanimated with the Compiler. This PR isn't the only part of the integration, i.e. this one was way more important internally and without it you're likely to run into errors at some point. That's another reason we don't want to backport this PR. If it's more about the new Rules of React and linting, you can make wrapper hooks on If you go through the Compiler's (or ESLint plugin's) code you can see it has special rules for Reanimated types. Therefore operations on "raw shared values" aren't considered errors. It won't handle composition however - there you should add your own layer of safe API. On what older versions exactly are you stuck and why can't you upgrade? |
@tjzel I'm maintaining Currently Do you think that more reasonable would be to add a wrapper around What I want to achieve is to get rid off errors preventing |
Making a wrapper hook seems sufficient in your case, you could even check dynamically if |
Thank you for response @tjzel! I'll wait for this PR to be merged and then will re-work my code accordingly! Thank you for your clarifications! |
## Summary Implement measurement of relative coordinates on Android. ## Test plan I've added more logic to runtime tests to include parent component changes in calculations. <details><summary> Example code to log measurement </summary> ```tsx import React from 'react'; import { Button, StyleSheet, View } from 'react-native'; import type { MeasuredDimensions } from 'react-native-reanimated'; import Animated, { measure, runOnUI, useAnimatedRef, useSharedValue, } from 'react-native-reanimated'; const EXPECTED_MEASUREMENT = { height: 100, pageX: 302, width: 80, x: 120, y: 150, }; export default function App() { const animatedRef = useAnimatedRef<Animated.View>(); const measurement = useSharedValue<MeasuredDimensions | null>(null); const handlePress = () => { runOnUI(() => { 'worklet'; measurement.value = measure(animatedRef); console.log(measurement.value); })(); }; return ( <View style={styles.container}> <View style={styles.bigBox}> <Animated.View ref={animatedRef} style={styles.box} /> </View> <Button onPress={handlePress} title="Click me" /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, }, bigBox: { position: 'absolute', top: 0, left: EXPECTED_MEASUREMENT.pageX - EXPECTED_MEASUREMENT.x, height: 300, width: 300, borderColor: '#b58df1', borderWidth: 2, }, box: { top: EXPECTED_MEASUREMENT.y, left: EXPECTED_MEASUREMENT.x, height: EXPECTED_MEASUREMENT.height, width: EXPECTED_MEASUREMENT.width, backgroundColor: '#b58df1', }, }); ``` </summary>
## Summary This PR extracts from TestRunner logic that isn't directly related to running tests. ## Test plan
## Summary This PR is a much cleaner approach than proposed in #6364. It includes metro-config modification which is essential to collapse logs from reanimated source code, which aren't helpful to the user while tracking down the issue. The previous approach was trimming logs from reanimated source code completely - this approach just collapses them, so that they are still available to the user and can be revealed above the presented stack trace part. ## General idea To get better logs, I had to implement the following 2 changes: 1. **metro config** - the `symbolicator` must have been added to properly collapse stack frames that aren't meaningful to the user, 2. **logger object** - the new logger object uses `LogBox.addLog` method, thanks to which we can get pretty stack traces when we log a warning from the UI thread (before such warnings didn't include meaningful stack trace as error stack was created inside `LogBox` after `runOnJS` was called, so we were getting a bit limited JS stack - see [example 11](#6387 (comment)) in the follow up PR). ## Example improvement (tested on a real project to see if it works there as well) - current logs either point to the reanimated source code or aren't readable at all (if warning is logged from the UI thread as in the example below) - new logger shows correct destination of the issue culprit in the code frame, collapses stack frames in the call stack that aren't interesting to the user (reanimated source code) and focuses on the file where the user included problematic code | Before | After | |-|-| | <video src="https://github.com/user-attachments/assets/a5302586-f4d0-4636-8bd8-6c406c9d8c73" /> | <video src="https://github.com/user-attachments/assets/3121636f-69a2-4b6f-8f38-b1889d4c62e1" /> | ## Test plan See the example in the next PR (#6387). --------- Co-authored-by: Tomasz Żelawski <[email protected]>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
lgtm docs ✨
Summary
This PR adds a secondary API for Reanimated mutables (useSharedValue hook) that wouldn't be troublesome for
react-compiler
static analysis. More details can be found here.New API example
Performance
I measured the time of 4096
set
vsvalue+=
calls on a single frame.Profiling code
From my measurements I got:
.value
set
Those values are definitely within margin errors, so performance loss is negligible with the new API.
Test plan