-
-
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
Performance optimization #1879
Performance optimization #1879
Conversation
@piaskowyk everytime we run RuntimeDecorator::isXRuntime() we do a property getter, do you think we can optimize that in some way? It would be awesome if we could store a C++ property (enum?) in the jsi::Runtime instance that represents it's type. (Worklet & UI, just Worklet, React-JS) |
What's |
Also, #1863 seems to be somewhat related |
Good point 👍, I did it here: 48e1a2a
The styleUpdater() is JS function calling by mapper: https://github.com/software-mansion/react-native-reanimated/blob/master/src/reanimated2/Hooks.ts#L225 |
Uses `unordered_map` registration for faster runtime checks (worklet, UI). Everything is managed by the `RuntimeDecorator`, it's faster because it only compares pointers using an `unordered_map`, and it also works for every worklet runtime (VisionCamera, Multithreading). Also it's less code and the backwards compatible 🤗
@@ -711,7 +714,13 @@ const getInterpolateCacheRGBA = ( | |||
} | |||
} | |||
const newCache = { r, g, b, a }; | |||
const overrideHash = hashOrderRGBA[curentHashIndexRGBA]; |
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.
Could you please use LRU Cache here? https://stackoverflow.com/a/46432113
App crashes on using style transform prop. Sample code: import React, { useEffect } from 'react';
import { StyleSheet, View } from 'react-native';
import Animated, {
Easing,
interpolate,
useAnimatedStyle,
useSharedValue,
withRepeat,
withTiming,
} from 'react-native-reanimated';
const styles = StyleSheet.create({
main: {
flex: 1,
backgroundColor: '#accc00',
justifyContent: 'center',
alignItems: 'center',
},
box: {
width: 100,
height: 100,
backgroundColor: '#a00',
},
});
function Comp(): JSX.Element {
const progress = useSharedValue(0);
const style = useAnimatedStyle(() => ({
width: interpolate(progress.value, [0, 0.5, 1], [100, 200, 100]),
transform: [{ rotate: `${interpolate(progress.value, [0, 1], [0, Math.PI * 2])}rad` }],
}), [progress]);
useEffect(() => {
progress.value = withRepeat(withTiming(1, { duration: 2000, easing: Easing.linear }), -1, false);
}, [progress]);
return (
<View style={styles.main}>
<Animated.View style={[styles.box, style]} />
</View>
);
}
export default Comp; Error message:
If comment out the code in isAnimated, then error disappears. function isAnimated(prop) {
'worklet';
if (Array.isArray(prop)) {
// comment problem section - START
// for (const item of prop) {
// for (const key in item) {
// if (item[key].onFrame !== undefined) {
// return true;
// }
// }
// }
// comment problem section - END
return false;
}
return prop.onFrame !== undefined;
} Package versionsReact Native: 0.64.1 Upd: after replacing all for..of on forEach problem disappears. What another way to fix it? |
## Description After #1879 was implemented (and also #2792), the mocks weren't updated. This PR fixes that. The error is the same as in #2766, but only shows up when running tests. ## Changes The mocks now match the signature of the functions. ## Test code and steps to reproduce There wasn't anywhere obvious to add a test for this - as far as I can see, we don't have any tests that use the mocks. I'm happy to add one though if you point me in the right direction! To reproduce, it's as simple as a jest (with mocks set up) test that includes code like: ```typescript const someEasing = Easing.bezierFn(0, 0, 0.15, 1); ``` ## Checklist - [x] Included code example that can be used to test this change - [x] Updated TS types - [ ] Added TS types tests - [ ] Added unit / integration tests - [ ] Updated documentation - [ ] Ensured that CI passes
Benchmarks
bezier - before 11 FPS, after 52 FPS
withTiming rotate - before 35 FPS, after 60 FPS
colors interpolation - before 11 FPS, after 16 FPS
I tested it on a regular iOS simulator so the optimization results are just indicative.
Checklist