All routes on the SheetRouter stack re-render when navigating?

[sean-anuland]

Im seeing the behaviour where all of the Sheet routes currently in the stack will re-render whenever I navigate to the next route.

I have stripped down my components and ActionSheet to try and eliminate user error here

My Action Sheet

const MyActionSheet = (props) => {


  // inject routeMap into starting route
  const routes = [
    { 
      name: "Route1", 
      component: MyComp1,
    },
    {
      name: "Route2",
      component: MyComp2,
    },
    {
      name: "Route3",
      component: MyComp3,
    },
    {
      name: "Route4",
      component: MyComp4,
    },
  ];


  return (
    <ActionSheet
      routes={routes}
      containerStyle={{ marginHorizontal: 20}}
   >
   </ActionSheet>
  );
};

export default MyActionSheet;

Example Route Component:

const router = useSheetRouter();
let params = useSheetRouteParams();
console.log("Route 1 rendered");
return(
  <View style={{gap: 20 }}>
       <View
        style={{
          alignItems: "center",
          flexDirection: "row",
          justifyContent: "space-around", 
        }}
      >
        <Button title={"cancel"} onPress={()=>{router.goBack()}} />
        <Button title={"yes"} onPress={goNext} />
      </View>
    </View>
)

Yet in my console log:

First route opened:

LOG  Route 1 rendered

Second route opened

 LOG  Route 1 rendered
 LOG  Route 2 rendered

Third route opened

 LOG  Route 1 rendered
 LOG  Route 2 rendered
 LOG  Route 3 rendered

Fourth route opened

 LOG  Route 1 rendered
 LOG  Route 2 rendered
 LOG  Route 3 rendered
 LOG  Route 4 rendered

Is this the expected behaviour when using sheet routes?