When ref is used in reanimated hook,"RangeError: Maximum call stack size exceeded, js engine: herme" will be triggered

[ThinkerLu]

Description

When ref is used in reanimated hook,"RangeError: Maximum call stack size exceeded, js engine: herme" will be triggered.
Code is on https://snack.expo.dev/@thinkerlu/bad-soda

Steps to reproduce

just run it

Snack or a link to a repository

https://snack.expo.dev/@thinkerlu/bad-soda

Reanimated version

3.0.2

React Native version

0.71.1

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

None

Device model

Pixel 6

Acknowledgements

Yes

[piaskowyk]

Is it necessary to pass whole object ref to worklet? It is because ref contains circular references.

[ThinkerLu]

Is it necessary to pass whole object ref to worklet? It is because ref contains circular references.

But how to reset the offset of scollView synchronously?
https://snack.expo.dev/@thinkerlu/resetoffset

[skam22]

@ThinkerLu

You need to pass a callback function defined outside of the worklet for it to work:

export default () => {
  const ref = useRef<FlatList>(null);

  const resetOffset = useCallback(() => {
     ref.current?.scrollToOffset({animated: false, offset: 0});
  },[ref])

  const scrollHandler = useAnimatedScrollHandler({
    onScroll: (event, context) => {
      //reset offset
     runOnJS(resetOffset)()
    },
  });

  return (
    <Reanimated.FlatList
      data={Array(100).fill(0)}
      renderItem={({index}) => (
        <Text style={{backgroundColor: 'white', height: 28}}>{index}</Text>
      )}
      keyExtractor={(_: number, index: number) => index.toString()}
      onScroll={scrollHandler}
      ref={ref}
    />
  );
};

[piaskowyk]

This issue should be fixed by #4367