react-native - React Native View onLayout は、子の高さがアニメーション化されている間、すべてのフレームを再レンダリングします

Question

でカスタムを作成するViewにtranslateYは、 を使用してコンテナーとコンテンツの高さを計算する必要がありますonLayout。これは完璧に機能しましたが、今日はAccordionアニメーションも行うコンポーネントを追加しました。これonLayoutにより、計算されたフレームごとに関数がレンダリングされ、アプリケーションが非常に遅くなります。useCallbackこれを修正するためにとを追加しようとしましたLayoutAnimationが、どちらもうまくいかなかったようです。

onLayoutアニメーションの前後だけをトリガーする方法はありますか? にデバウンスを追加することを考えましたonLayoutが、別の解決策があることを願っています。

export default memo(({ translateY }) => {
  const [containerHeight, setContainerHeight] = useState(0);
  const [contentHeight, setContentHeight] = useState(0);

  console.log('render', containerHeight, contentHeight);

  const onLayoutContainer = useCallback(event => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
    const height = event.nativeEvent.layout.height;
    setContainerHeight(height);
  }, []);

  const onLayoutContent = useCallback(event => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
    const height = event.nativeEvent.layout.height;
    setContentHeight(height);
  }, []);

  return (
    <View onLayout={onLayoutContainer}>
        <Animated.View
          onLayout={onLayoutContent}
          style={{ transform: [{ translateY }] }}
        >
            <Accordion />
            <Accordion />
            <Accordion />
            <Accordion />
            <Accordion />
            <Accordion />
        </Animated.View>
    </View>
  );
});