React component prevent re-render with useRef, useCallback, useMemo trick.

react_no_re-render.tsx

import React, { useEffect, useCallback, useRef, useMemo } from "react";
import { View } from "react-native";
import { Appbar } from "react-native-paper";
import { Stack, useNavigation } from "expo-router";

export default function App(): React.JSX.Element {
  const navigation = useNavigation();
  const [stage, setStage] = React.useState(0);

  const stageRef = useRef(stage);
  useEffect(() => {
    stageRef.current = stage;
  }, [stage]);

  const handlePress = useCallback(() => {
    if (stageRef.current === 0) {
      navigation.goBack();
    } else {
      setStage(0);
    }
  }, [navigation]);

  const headerLeft = useMemo(() => {
    return () => <Appbar.BackAction onPress={handlePress} />;
  }, [handlePress]);

  return (
    <View>
      <Stack.Screen
        options={{
          headerLeft,
        }}
      />
      {/* Content */}
    </View>
  );
}