react-native-actions-sheet
react-native-actions-sheet copied to clipboard
How to prevent ActionSheet children recreate?
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.