Performance drop with FlatList + useDerivedValue

Description

FlatList experiences a serious drop in performance when useDerivedValue is used inside the renderItem function (but only if we return shared value, if inside useDerivedValue return null everything is ok).

Screenshots

https://user-images.githubusercontent.com/47810008/107515749-7a9c0100-6bbc-11eb-885e-9043f642c1aa.mov

Steps To Reproduce

Run code below. Then change return value of useDerivedValue to null - after that everything should be smooth .

Expected behavior

Smooth 60 fps.

Actual behavior

If I scroll back and forth i can drop performance to ~ 3 fps.

Snack or minimal code example

import React from 'react'
import {StyleSheet, FlatList, View, Text} from 'react-native'
import Animated, {
  useAnimatedScrollHandler,
  useSharedValue,
  useDerivedValue
} from 'react-native-reanimated'

const AnimatedFlatList = Animated.createAnimatedComponent(FlatList)

const data = [...Array(300).keys()]

const Slider = () => {
  const transX = useSharedValue(0)
  
  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event) => {
      transX.value = event.contentOffset.x
    }
  })

  const renderItem = ({item, index}) => {
          return <Item index={index} item={item} transX={transX} />
        }

  return (
    <View style={styles.container}>
      <View style={styles.listContainer}>
        <AnimatedFlatList
          onScroll={scrollHandler}
          horizontal
          showsHorizontalScrollIndicator={false}
          style={styles.list}
          data={data}
          decelerationRate="fast"
          centerContent
          snapToInterval={15}
          scrollEventThrottle={16}
          snapToAlignment="center"
          renderItem={renderItem}
          keyExtractor={(item, index) => {String(index)}}
        />
      </View>
    </View>
  )
}

const Item = ({index, item, transX}) => {

    const udv = useDerivedValue(() => {
            return transX.value //change this to null
        })

    return (
        <Animated.View style={[styles.box]}>
            <Text style={styles.label}>{item}</Text>
        </Animated.View>
)}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center'
    },
    listContainer: {
      height: 265,
      alignItems: 'center',
      justifyContent: 'center',
    },
    list: {
      height: 240,
      flexGrow: 0,
    },
    box: {
      width: 15,
      height: 150,
      backgroundColor: 'blue',
      borderRadius: 20,
      alignItems: 'center',
      justifyContent: 'center',
      borderColor:'black',
      borderWidth:1
    },
    label: {
      fontSize: 10,
      color: '#fff',
    },
  })

export default Slider

Package versions

• React: 16.13.1
• React Native: 0.63.4
• React Native Reanimated: 2.0.0-rc.3
• NodeJS: 14.15.5

[mxm87]

The same thing happens with simple manual scroll, so that doesn’t related to FlatList by itself.

import React from 'react'
import {StyleSheet, FlatList, View, Text} from 'react-native'
import Animated, {
  useAnimatedGestureHandler,
  useSharedValue,
  useDerivedValue,
  useAnimatedStyle
} from 'react-native-reanimated'
import {PanGestureHandler} from 'react-native-gesture-handler'

const data = [...Array(300).keys()]

const Slider = () => {
  const transX = useSharedValue(0)

  const onGestureEvent = useAnimatedGestureHandler({
    onStart: (_, ctx) => {
        ctx.offsetX = transX.value
      },
    onActive: (event, ctx) => {
        transX.value = ctx.offsetX + event.translationX
      }
  })

  const animatedStyle = useAnimatedStyle(() => {
    return {
        flexDirection:'row',
        transform: [
            { translateX: transX.value }
        ]}
    })

  return (
      <View style={styles.container}>
          <PanGestureHandler onGestureEvent={onGestureEvent}>
            <Animated.View style={animatedStyle}>
                {data.map((item, index) => {
                    return <Item index={index} item={item} transX={transX} key={index}/>
                })}
            </Animated.View>
          </PanGestureHandler>
      </View>
  )
}

const Item = ({index, item, transX}) => {

    const udv = useDerivedValue(() => {
            return transX.value // <= change this to null
        })

    return (
        <View style={styles.box}>
            <Text style={styles.label}>{item}</Text>
        </View>
)}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center'
    },
    box: {
      width: 15,
      height: 150,
      backgroundColor: 'blue',
      borderRadius: 20,
      alignItems: 'center',
      justifyContent: 'center',
      borderColor:'black',
      borderWidth:1
    },
    label: {
      fontSize: 10,
      color: '#fff',
    },
  })

export default Slider

[ehsan6sha]

I’m facing the same issue using useAnimatedStyle both ScrollView and FlatList, any workarounds?

I couldn’t find any so I reverted to Animated library