Repository: expo/expo
File: packages/expo-router/src/useScreens.tsx (TypeScript)

Code before:
          // and this won’t cause a redundant second update.
          if (isLeaf && stateForPath) store.setFocusedState(stateForPath);
        }),
      [navigation]
    );

    useEffect(() => {
      return navigation.addListener(
        'transitionEnd',
        (e?: NativeStackNavigationEventMap['transitionEnd']) => {
          if (!e?.data?.closing) {
            // When navigating to a screen, remove the no animation param to re-enable animations
            // Otherwise the navigation back would also have no animation
            if (hasParam(route?.params, INTERNAL_EXPO_ROUTER_NO_ANIMATION_PARAM_NAME)) {
              navigation.replaceParams(
                removeParams(route?.params, [INTERNAL_EXPO_ROUTER_NO_ANIMATION_PARAM_NAME])
              );
            }
          }
        }
      );
    }, [navigation]);

    return (
      <Route node={value} route={route}>
        {value.type === 'route' && route?.key && unstable_navigationEvents.hasAnyListener() && (
          <AnalyticsListeners navigation={navigation} screenId={route.key} />
        )}
        <ZoomTransitionEnabler route={route} />
        <ZoomTransitionTargetContextProvider route={route}>
          <React.Suspense fallback={<SuspenseFallback route={value} />}>
            <ScreenComponent
              {...props}
              // Expose the template segment path, e.g. `(home)`, `[foo]`, `index`
              // the intention is to make it possible to deduce shared routes.
              segment={value.route}
            />
          </React.Suspense>
        </ZoomTransitionTargetContextProvider>
      </Route>
    );
  }

  if (__DEV__) {
    BaseRoute.displayName = `Route(${value.route})`;
  }

  qualifiedStore.set(value, BaseRoute);
  return BaseRoute;
}


Review comment (refactor):
Minor, but perhaps we could extract the conditional expressions just before the JSX for easier readability, so the above reads like `isRouteType && hasRouteKey && unstable_navigationEvents.hasAnyListener()`

Code after:
          // and this won’t cause a redundant second update.
          if (isLeaf && stateForPath) store.setFocusedState(stateForPath);
        }),
      [navigation]
    );

    useEffect(() => {
      return navigation.addListener(
        'transitionEnd',
        (e?: NativeStackNavigationEventMap['transitionEnd']) => {
          if (!e?.data?.closing) {
            // When navigating to a screen, remove the no animation param to re-enable animations
            // Otherwise the navigation back would also have no animation
            if (hasParam(route?.params, INTERNAL_EXPO_ROUTER_NO_ANIMATION_PARAM_NAME)) {
              navigation.replaceParams(
                removeParams(route?.params, [INTERNAL_EXPO_ROUTER_NO_ANIMATION_PARAM_NAME])
              );
            }
          }
        }
      );
    }, [navigation]);

    const isRouteType = value.type === 'route';
    const hasRouteKey = !!route?.key;

    return (
      <Route node={value} route={route}>
        {isRouteType && hasRouteKey && unstable_navigationEvents.hasAnyListener() && (
          <AnalyticsListeners navigation={navigation} screenId={route.key} />
        )}
        <ZoomTransitionEnabler route={route} />
        <ZoomTransitionTargetContextProvider route={route}>
          <React.Suspense fallback={<SuspenseFallback route={value} />}>
            <ScreenComponent
              {...props}
              // Expose the template segment path, e.g. `(home)`, `[foo]`, `index`
              // the intention is to make it possible to deduce shared routes.
              segment={value.route}
            />
          </React.Suspense>
        </ZoomTransitionTargetContextProvider>
      </Route>
    );
  }

  if (__DEV__) {
    BaseRoute.displayName = `Route(${value.route})`;
  }

  qualifiedStore.set(value, BaseRoute);