diff --git a/src/routes/RoutesBuilder.js b/src/routes/RoutesBuilder.js index 4d17cfa..7cbdaf2 100644 --- a/src/routes/RoutesBuilder.js +++ b/src/routes/RoutesBuilder.js @@ -1,4 +1,4 @@ -import React, { useContext, useEffect } from 'react'; +import React, { useContext, useEffect, useMemo } from 'react'; import { Route, Routes } from 'react-router-dom'; import { AppContext } from '../AppProvider'; import { getRouteComponent } from './utils'; @@ -9,20 +9,31 @@ const RoutesBuilder = ({ routes, configs, entry, - requireOnboarding = true, - ..._ + requireOnboarding = true, // Default value for requireOnboarding }) => { const navigate = useNavigation(); const [{ accounts }] = useContext(AppContext); + + // Check if onboarding is required and accounts are available + const needsOnboarding = requireOnboarding && accounts.length === 0; + + // Navigate to onboarding if required useEffect(() => { - if (requireOnboarding && !accounts.length) { + if (needsOnboarding) { navigate(ROUTES_MAP.ONBOARDING); } - }, [requireOnboarding, navigate, accounts]); + }, [needsOnboarding, navigate]); + + // Memoized computation of the entry component + const EntryComponent = useMemo( + () => (entry ? getRouteComponent(routes, entry) : null), + [entry, routes] + ); - const EntryComponent = entry ? getRouteComponent(routes, entry) : null; + // Render routes conditionally based on onboarding status + if (needsOnboarding) return null; - return !requireOnboarding || (requireOnboarding && accounts.length > 0) ? ( + return ( {EntryComponent && } />} {routes.map(({ key, name, path, Component }) => ( @@ -33,7 +44,7 @@ const RoutesBuilder = ({ /> ))} - ) : null; + ); }; export default RoutesBuilder;