Multiple re-renders on _layouts and pages.

[moxen-dev]

Summary

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.

Minimal reproducible example

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 />
  );
};

[TowhidKashem]

+1 getting this as well. My JS thread goes down to ~30 frames each on the perf monitor each time a new tab screen is clicked. It's pretty unusable compared to the previous version. So I had to remove expo router, sucks cause it was ~3 days of work for me (complex app). Might try again at a later version when it's more stable.

[moxen-dev]

Hey folks, any news here? My app rely on useEffect to kick of a video streaming and because of that, it is starting the streaming twice leading to some weird behaviour. Any update could help me, even if it is to say that this will not be tackle right now.

I really want to push expo router forward in my app since I am totally into it's benefits.

[moxen-dev]

I am investigating this deeply and found this old thread that I suspect is related.
react-navigation/react-navigation#476

[mariusklingl]

Yeah also facing the same problem.... anyone got a workaround on that issue? Same as @TowhidKashem. Put a lot of effort in designing the layout. Need to switch because of performance and data fetching issues.
Just happens if you nest two or more navigators. Doesn't matter if it is Stack or Tab. Always mounts twice.

[marklawlor]

@moxen-dev Can you please provide a full reproduction. When I create an app with the information provided the _layout.tsx is only rendered once.. EDIT: I was using index.tsx instead of (app)/index.tsx, which does not seem to do the double render. I'll look into this further

[moxen-dev]

Feel free to ask me anything @marklawlor.

[moxen-dev]

@marklawlor any updates here? just a friendly reach out so I can plan accordingly.

[marklawlor]

Its not a simple fix, but I'm working on something. If this issue is causing you problems, you can use API's like memo() to protect your components against re-renders. Its inconvenient, hence why I'm working on a fix, but shouldn't be completely blocking.

[moxen-dev]

@marklawlor thank you for your answer. Maybe as part of a impostor syndrome, I was still think that the issue could be only on my code base and some mistake I made. So your confirmation helped me. I am already doing react memoization as part of a good practice but thanks for pointing this route (no pun intended).

[SavageWilliam]

Can someone explain why you need index.tsx (with a redirect to home/index).. I'm also havign trouble where the app entry is / which corresponds to an index file.

I thought the point of:

export const unstable_settings = {
  initialRouteName: 'welcome',
}

would mean that the entry route is /welcome and not /?

[leandromatos]

Its not a simple fix, but I'm working on something. If this issue is causing you problems, you can use API's like memo() to protect your components against re-renders. Its inconvenient, hence why I'm working on a fix, but shouldn't be completely blocking.

Unfortunately, memo() didn't work for me, @marklawlor.

I have three simple screens, using only a <Text/> to identify each screen and a console.log to confirm that every navigate re-render all screens.

In a large application, the performance will be very poor.

[minuz]

Hi @marklawlor ! Firstly, thanks for looking into the issue and trying to fix it.
I'm in the process of building a new app and thought I was going mad with the re-renders that is obviously causing some weird behaviours on my app. Don't want to put more pressure on you, but do you have a rough ETA for the fix?
Also, if you need any help, I'd be happy to assist in any way I can.

[athenawisdoms]

Also though I was going crazy when every screen in the stack is re-rendering after the user navigates to a new screen. This led to a strange behavior where every previous screens that re-rendered are still trying to read the search params that may no longer be passed on to the newer screens.

[AmeerDlshad]

I have 2-3 ways to fix that issue if anyone is still having this issue.

[topzdev]

I have 2-3 ways to fix that issue if anyone is still having this issue.

I'm still having this issue, can you share your fixes regarding this issue?

[marklawlor]

If you are experiencing this issue you can also the next tag which is published on npm which includes various fixes.

[AmeerDlshad]

The easiest way to fix this would be just change the folder name of app/(tabs) to app/tabs by doing this everything will work as you expect, but now anywhere you've used router like router.push("home") you need to change it back to router.push("tabs/home") basically now the 'tabs' shows in the url. If you don't like this approach there is another way.

you are most likely using a Stack at the root that has the Tabs inside it that looks like this:

return <Stack>   
      <Stack.Screen name="login" />  
      <Stack.Screen name="(tabs)" />  
       </Stack>

You can change it to this:

return <Tabs tabBar={() => <></>} backBehavior="none">
      <Tabs.Screen name="login" options={{ unmountOnBlur: true }} />
      <Tabs.Screen name="(tabs)" options={{ unmountOnBlur: true }} />
    </Tabs>

the only issue with this one is now router.repalce() functions just like router.push() it means if the user goes from the login screen to the (tabs)/home screen and presses the back button it goes back to the login screen, to fix this we can use backBehavior="none" now the back button doesn't work between the root screens but they work just fine inside the (tabs) or any other nested screen you have that's not in the root layout.

Another way would be to have one big Tabs in the root like this in the app/_layout.tsx:

return <Tabs>
      <Tabs.Screen
        name="login"
        options={{ unmountOnBlur: true, href: null }}
      /> {/* Stack Screen */}
      <Tabs.Screen name="home" /> {/* Tab Screen */}
      <Tabs.Screen name="account" /> {/* Tab Screen */}
    </Tabs>

add options={{ unmountOnBlur: true, href: null }} to every stack screen and write the Tab screens in the same way you were writing before, href:null would make it so the login screen doesn't show on the TabBar, but remember now you need to copy your Tab screens to the root folder like this:
app/(tabs)/home to app/home
app/(tabs)/account to app/account

The main cause of this multiple render bug is when you navigate form a root Stack screen to a screen that uses group syntax (tabs)/home, and/or you are using useSearchParams() hook.

Hope that helps.

[orbiteleven]

@marklawlor are you expecting this to be fixed with v2? Are there related issues/PRs to follow?

[makirby]

Having this issue when using screens with a _layout file. When the l remove the _layout file, no more double useEffect calls.

[steve228uk]

This seems to be fixed on the next branch. Thanks @marklawlor

Edit: Scratch that, same issue if I use a Redirect.

[RohovDmytro]

Using latest expo-router (beta-10) and expo beta 4. The issue persists.

Having 2-3 mounts. The structure is very similar as in the described issue.

Seems escalaty to mee! :)

[Dundyne]

I'm also experiencing a bunch of unnecessary rerenders every time a screen loads. Spent a bunch of time moving over from reactnav, shame to need to undo it...

[devoren]

same issue on sdk 49 stable

[EvanBacon]

Worth clarifying that this doesn't happen on all layout routes, can be triggered by a number of reasonable causes like using useGlobalSearchParams, and is other times related to how the link is sent (which can be circumvented by using useNavigation as-is).

[devoren]

In my case i have auth stack and root stack, and if push to auth/login from root stack screen it rerender 2 times, and if i push to auth it does not rerender 2 times
Authlayout:

export default function AuthLayout() {
	return (
		<Stack screenOptions={{ headerShown: false }}>
			<Stack.Screen name="login" />
			<Stack.Screen name="signup" />
			<Stack.Screen name="reset-password" />
			<Stack.Screen name="verification" />
		</Stack>
	);
}

For example i push to auth from products/[id]
(root layout)

UPD:
Yes, it's _layout's fault, if I remove it, the screen is mounted once

[claudesortwell]

If anyone’s willing to provide me with a minimal repo for reproduction, I’m happy to look into and try fix this issue.

Edit: seems like this person has a similar issue and has a repo I can look at #838

[EvanBacon]

There appear to be some unrelated issues linked in here. I'll assume #838 is an accurate representation of this issue as it has a reproducible demo linked which generally aligns with the comments I'm reading in here. When it's fixed in expo/expo#24147, I'll close this issue. If people have further issues afterwards, please open new issues with reproducible demos.

[EvanBacon]

A fix has been published in expo-router@2.0.3 (2.0.3). If this didn't fix your particular issue, please open a new issue with a minimum reproducible issue. Sorry for any inconvenience this may have caused.

[Seimodei]

Can confirm that the new fix on expo-router version 2.0.4 solves the issue.

[idrakimuhamad]

What if I can't upgrade to v 2? I have some other sdk 49 bugs that limiting my base from upgrade to sdk 49 currently.

[Seimodei]

@idrakimuhamad Can't say for sure. As it seems the bug exists on earlier versions of expo-router. So you might have to look for another work around in terms of upgrading to the latest expo sdk.

[EvanBacon]

@idrakimuhamad you can try pulling this patch into your local copy of expo-router 7b6032d and running npx patch-package expo-router.

[idrakimuhamad]

@idrakimuhamad you can try pulling this patch into your local copy of expo-router 7b6032d and running npx patch-package expo-router.

Sweet. Thanks!

[hellotingwai]

i don't know if it's a good solution. i used useEffect in the _layout.js and now it runs once.

import { Stack } from "expo-router";
import { Text } from "react-native";
import React, { useEffect, useState } from "react";

export default function Layout() {
  const [loading, setLoading] = useState('true')

  useEffect(()=>{
      setLoading(false);
  },[]);

  if(loading){
    return <Text>Loading...</Text>
  }else{
    return <Stack name="home" screenOptions={{ headerShown : false}} />;
  }
}

[markymc]

A fix has been published in expo-router@2.0.3 (2.0.3). If this didn't fix your particular issue, please open a new issue with a minimum reproducible issue. Sorry for any inconvenience this may have caused.

Thanks! I updated to 2.0.8 and the double mount on tab switch seems to have stopped!

[HerpGuy88]

This bug has re-emerged in 3.4.6.
So far, that's the 2nd bug from a previous 2.0. version that had been fixed that's re-emerged in v3.

[augustosnk12]

It stills happens when I "minimize" the app and open it again. My "home" page re-render as much as I do this.

I'm using 3.4.5 expo router version.

[augustosnk12]

In some part of my app I replaced the push by navigation and it does not happen anymore

[PopBot]

I too am having the same issue as of March 2024. The frames do not properly mount on time, so each item in the stack for me must be wrapped by a useeffect, causing multiple renders.

[marklawlor]

This repo (and v2) is in maintenance mode and will only receive updates for critical issues.

If you are experience this issue on v3, please create a new issue with a full reproduction on the https://github.com/expo/expo repo

[PopBot]

Gotcha, thanks @marklawlor!

[lukaskf]

If someone finds this thread, maybe this will help.

I was having re-render issues on SDK 50 and using v3. Then fixed by

Replacing buttons that had
router.push("route-name")
with
<Link href="/route-name">

[pfcodes]

Happening on SDK 50 and v3.4.8

[erbud]

I keep reproducing the issue with Expo SDK 50.0.13 and Expo Router 3.4.8 when using useLocalSearchParams() on Android compilation …

[barrownicholas]

For better visibility and tracking, and since this seems to be a new iteration of a once-fixed issue, I re-opened a new issue with a new, minimal reproducable example: expo/expo#29163

Edit 1: as @lukaskf points out, this might be an issue with router.push (but his fix of using Link did not work for me)

[Streudal]

If someone finds this thread, maybe this will help.

I was having re-render issues on SDK 50 and using v3. Then fixed by

Replacing buttons that had router.push("route-name") with <Link href="/route-name">

This worked for me!

The imperative way of routing in expo-router is very powerful but may cause unwanted behavior if you don't fully understand it. My main issue was using router.push in most places but this would cause screens to stack as fast as I could push the button.

I think it's because the Link component, provided by expo-router, uses the navigation.navigate() method from react-navigation under the hood (so the peeps above saying that if you use router.navigation() or the useNavigation() hook may be correct for your use case because it does the same thing). Also, I don't have nested _layout routes but worth trying out.

Here are the docs that explains this: https://docs.expo.dev/router/navigating-pages/

Also, using router.navigate() was also an option.

[HelgiMagic]

use router.navigate() or <Link href=""> instead of router.push

[zzorba]

For anyone else hitting this, in my situation it turned out that my pages were setup like this:

// file room/[id].tsx
export default function RoomScreen() {
  return (
    <>
      <Stack.Screen
        options={{
          title: 'Room',
          presentation: 'modal',
          animation: 'slide_from_right',
          gestureEnabled: true,
          gestureDirection: 'horizontal',
          fullScreenGestureEnabled: true,
        }}
      />
      <Room />
    </>
  );
}

Removing the <Stack.Screen> (so the content only contains <Room />) fixed the issue of multiple mounts of the Room component on every push.