What is the correct usage of the useDerivedValue hook?

[yaroslavnikiforov]

Consider, please, the following code samples. Which variant is correct and why?

First:

const [isVisible, setIsVisible] = useState(false)
const dv = useDerivedValue(() => (isVisible ? 1 : 0), [isVisible])
const animatedStyles = useAnimatedStyle(() => ({ opacity: withTiming(dv.value) }))

Second:

const [isVisible, setIsVisible] = useState(false)
const dv = useDerivedValue(() => withTiming(isVisible ? 1 : 0), [isVisible])
const animatedStyles = useAnimatedStyle(() => ({ opacity: dv.value }))

[MatiPl01]

Even better:

const [isVisible, setIsVisible] = useState(false);
const animatedStyles = useAnimatedStyle(() => ({
  opacity: withTiming(isVisible ? 1 : 0),
}));

Answering your question, this doesn't make much difference. The first approach might be slightly more performant, because less values are frequently updated (dv is updated once and animated stale is updated when as the result of the withTiming usage, compared to the second example, where dv and animated style are updated multiple times) but the difference won't be even noticeable.

Both approaches work, so use the one that you prefer.

[yaroslavnikiforov]

Thanks for the reply @MatiPl01. I also thought the first approach should be more performant, but I got ANR errors on Android. That's why I wonder.

Here is the exact code that caused the error:

const TIMING_CONFIG = { duration: 200 }

...

  const animatedPosition = useDerivedValue(
    () => (isTabBarVisible ? 0 : -TAB_BAR_HEIGHT),
    [isTabBarVisible],
  )
  const animatedStyles = useAnimatedStyle(
    () => ({ bottom: withTiming(animatedPosition.value, TIMING_CONFIG) }),
    [],
  )

When I changed it to the following variant the error disappeared:

  const animatedPosition = useDerivedValue(
  () => withTiming(isTabBarVisible ? 0 : -TAB_BAR_HEIGHT, TIMING_CONFIG),
  [isTabBarVisible],
)
const animatedStyles = useAnimatedStyle(() => ({
  bottom: animatedPosition.value,
}))

I had version 2.10.0 and [email protected].

[MatiPl01]

Can you upgrade reanimated to v3 if you use 2.10.0? v2 is no longer supported.
I've just tested on v3 and it works fine on both platforms.