Skip to content
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

Fix Fast Refresh with useDerivedValue #5255

Closed
wants to merge 1 commit into from
Closed

Conversation

Latropos
Copy link
Contributor

Summary

Closes #1964

According to documentation https://reactnative.dev/docs/fast-refresh adding comment // @refresh reset anywhere in a file forces the state to be reset on Fast Refresh, which is handy since we have some calculations that should be done only on mount.

This PR doesn't change any behaviour in RELEASE mode at all.

Test plan

Tested on this example:
import * as React from 'react'
import { Text, View, StyleSheet, Pressable } from 'react-native'
import Animated, { useSharedValue, useDerivedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated'

/**
 * Inside of App, try commenting out the extraState prop that is passed to to <Shape />
 *
 * Once you comment it out, and save with Fast Refresh, the derived value no longer updates when you press on the box.
 *
 * Updating the scoped variables around a derived value seems to break the mutation of a shared value
 */

function Shape({ extraState, pressed }) {
  const opacity = useDerivedValue(() => (pressed.value ? 0.5 : 1))

  const style = useAnimatedStyle(() => ({
    opacity: withTiming(opacity.value)
  }))

  return <Animated.View style={[styles.shape, style]} />
}

export default function App() {
  const pressed = useSharedValue(false)
  const [pressedState, setPressed] = React.useState(false)

  const onPressIn = () => {
    pressed.value = true
    setPressed(true)
  }
  const onPressOut = () => {
    pressed.value = false
    setPressed(false)
  }

  return (
    <Pressable onPressIn={onPressIn} onPressOut={onPressOut} style={styles.container}>
      <Shape
        pressed={pressed}
        // comment extraState in/out, and then save. Notice that doing this breaks the press in/out interaction
        extraState={pressedState}
      />
    </Pressable>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'cyan',
    padding: 8
  },
  shape: {
    height: 200,
    width: 200,
    backgroundColor: 'black',
    borderRadius: 16
  }
})

@tomekzaw
Copy link
Member

// @refresh reset blows my mind, didn't know about that! 🤯

@Latropos Latropos marked this pull request as ready for review October 18, 2023 09:03
@Latropos
Copy link
Contributor Author

Latropos commented Nov 3, 2023

@tomekzaw I think that we are unable to fix it and we will have to close this PR and the issue. Do you think we should add it to our docs or something?

@tomekzaw
Copy link
Member

tomekzaw commented Nov 3, 2023

Let's just close this PR and don't change docs, reload is fine

@Latropos Latropos closed this Nov 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Changing variables in a component's scope with Fast Refresh breaks useDerivedValue
2 participants