react-native-actions-sheet icon indicating copy to clipboard operation
react-native-actions-sheet copied to clipboard

How to prevent ActionSheet children recreate?

Open chengfengfengwang opened this issue 1 year ago • 0 comments

import ActionSheet from "react-native-actions-sheet";
import { useEffect, useRef, memo } from "react";
import { Text, Button, View } from "react-native";
import type { ActionSheetRef } from "react-native-actions-sheet";
let renderCount = 0;
const Inner = memo(function () {
  useEffect(() => {
    renderCount++
  }, []);
  return (
    <View style={{padding: 20}}>
      <Text>{renderCount}</Text>
      <Text>Hi, I am here.</Text>
      <Text>Hi, I am here.</Text>
      <Text>Hi, I am here.</Text>
      <Text>Hi, I am here.</Text>
      <Text>Hi, I am here.</Text>
    </View>
  );
});
export default function App() {
  const actionSheetRef = useRef<ActionSheetRef>(null);

  return (
    <>
      <Button title="show" onPress={() => actionSheetRef.current.show()} />
      <ActionSheet ref={actionSheetRef}>
        <Inner />
      </ActionSheet>
    </>
  );
}

I want to render a webview within an ActionSheet, similar to the example provided. However, every time the inner component is recreated, it performs poorly in terms of performance.

chengfengfengwang avatar Jun 02 '24 12:06 chengfengfengwang