Does using useAnimatedStyle in every component have performance implications?

[cmaycumber]

I'm creating a new component library and I want to use https://moti.fyi/ under the hood as the base for every component. Every Moti component uses useAnimatedStyle, so every one of my components would also use useAnimatedStyle.

Do you think this would have any negative effects on performance, especially as an application size grows?

[nandorojo]

I'm curious about this as well.

[nandorojo]

@cmaycumber maybe you could do this in your design system:

import { MotiView, MotiProps } from 'moti'
import { styled, View } from 'dripsy'

const StyledMotiView = styled(MotiView)()

type Props = React.ComponentProps<typeof StyledMotiView>

export function Box(props: Props) {
  const motiProps: keyof MotiProps = ['animate', 'exit', '...']

  const isMotiView = Object.keys(props).some((prop) => motiProps.includes(prop))

  if (isMotiView) {
    return <StyledMotiView {...props} />
  }

  return <View {...props} />
}

That way, you only use useAnimatedStyle when you want animated props for Moti.