useAnimatedScrollHandler fails to update the handler on the web

[gaearon]

Description

This should swap out the scroll handler every second.

This works on native. On the web, you'll always see handler 2 being printed.

import * as React from 'react'
import {View} from 'react-native'
import Animated, {
  useAnimatedScrollHandler,
  runOnJS,
} from 'react-native-reanimated'

export default function App() {
  const [flip, setFlip] = React.useState(false)
  React.useEffect(() => {
    let id = setInterval(() => setFlip(f => !f), 1000)
    return () => clearInterval(id)
  }, [])

  function print1() {
    console.log('handler 1')
  }
  function onScroll1() {
    'worklet'
    runOnJS(print1)()
  }
  const obj1 = {
    onScroll: onScroll1,
  }

  function print2() {
    console.log('handler 2')
  }
  function onScroll2() {
    'worklet'
    runOnJS(print2)()
  }
  const obj2 = {
    onScroll: onScroll2,
  }

  const handler = useAnimatedScrollHandler(flip ? obj1 : obj2)

  return (
    <View style={{flex: 1, height: 300, flexDirection: 'row'}}>
      <Animated.FlatList
        onScroll={handler}
        style={{flex: 1, backgroundColor: 'red'}}
        contentContainerStyle={{
          paddingTop: 1000,
        }}
      />
    </View>
  )
}

Steps to reproduce

See above

Snack or a link to a repository

see above

Reanimated version

3.6.0

React Native version

0.72.5

Platforms

Web

JavaScript runtime

None

Workflow

None

Architecture

None

Build type

None

Device

None

Device model

No response

Acknowledgements

Yes

[github-actions[bot]]

Hey! 👋

The issue doesn't seem to contain a minimal reproduction.

Could you provide a snack or a link to a GitHub repository under your username that reproduces the problem?

[gaearon]

It does.

[gaearon]

It would be nice if the bot offered a Snack link that already contains reanimated. I don't understand how to add packages to Snacks.

[gaearon]

I guess I've mentioned this in https://github.com/software-mansion/react-native-reanimated/issues/5360 before in the "web" section but it's distinct enough that it deserves a separate issue.

[szydlovsky]

Fixed by: https://github.com/software-mansion/react-native-reanimated/pull/5845