ammarahm-ed / react-native-actions-sheet

A Cross Platform(Android, iOS & Web) ActionSheet with a flexible api, native performance and zero dependency code for react native. Create anything you want inside ActionSheet.
https://rnas.vercel.app
MIT License
1.41k stars 119 forks source link

How to prevent ActionSheet children recreate? #366

Open chengfengfengwang opened 1 month ago

chengfengfengwang commented 1 month ago
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.