Multiple re-renders on _layouts and pages.

[moxen-dev]

Main Issue

I noticed that my screen is triggering the initial useEffect twice. I was suspecting that some upper level component was unmounting and mounting again, but turns out that the _layout.tsx file is rendering more than once.

Details

My currently structure is the following:

app/
    _layout.tsx (<Slot />)
    (auth)
    (app)
        index.tsx (with a redirect to home/index)
        _layout.tsx (<Slot />)
        (tabs)
            _layout.tsx (<Tabs />)
            home/
                _layout.tsx (<Stack />)
                index.tsx            
         lives/
            [liveId].tsx
            _layout.tsx (<Stack />)

Logs

When I reload my app and the router put me at the logged index, these were the renders that happened:

Why app/(app)/_layout.tsx rendered 3 times and app/(app)/home/ndex.tsx rendered twice?

I understand that the first render of the layout is related to the (app)/index that does the redirect. Another is related to the screen I was redirected to. But what about the third time? I also noticed that it is not being remounted because does not trigger the unmount of the useEffect.

My app/(app)/_layout.tsx for reference:

import { Slot } from "expo-router";
import { useEffect } from "react";

export default function AppLayout() {
  console.log('rendering AppLayout');

  useEffect(() => {
    return () => {
      console.log('AppLayout unmount');
    };
  }, []);
  return (
    <Slot />
  );
};

[kennethstarkrl]

Have this issue as well. Causes a lot of lagging issues down the road when you have things like flatlists with a lot of elements, even using flashlist.