Introducción

He leído que, para aumentar el rendimiento de las aplicaciones de React, es genial colocar los proveedores de contexto lo más cerca posible de los niños.

Por ejemplo, imagina que tienes este contexto

 function UserPostsProvider({ children }) { const [posts, setPosts] = useState({}); ... return <UserPostsContext.Provider ... }

que se consume en dos pantallas: "UserPostsGrid" y UserPostsCardList"

Pregunta

¿Cómo puedo hacer para colocar el proveedor de contexto cerca de ambas pantallas sin perder los datos con estado del proveedor?

Quiero decir, este es mi sistema de navegación actual:

 function StackNavigator() { /* Local Context Providers */ return ( <UserPostsProvider> <MainStackNavigator /> </UserPostsProvider> ); } const MainStackNavigator = memo(() => { const Stack = createStackNavigator(); return ( <Stack.Navigator> // ... lot of screens <Stack.Screen name="UserPostsGrid" component={UserPostsGrid} /> <Stack.Screen name="UserPostsCardList" component={UserPostsCardList} /> </Stack.Navigator> ); }, ...);

¿Cómo puedo hacer para compartir este contexto (sin desmontarlo y perder sus datos) entre todas las instancias de las pantallas UserPostsGrid y UserPostsCardList?

Mi idea

He pensado en encapsular las pantallas dentro de UserPostsProvider de la siguiente manera

 function UserPostsGrid(...) { return <UserPostsProvider> ...screen data </UserPostsProvider> } function UserPostsCardList(...) { return <UserPostsProvider> ...screen data </UserPostsProvider> }

Todavía lo he probado, pero siento que el proveedor se puede desmontar cuando la pantalla de la pila está cerrada y que hay dos instancias diferentes (el estado no se comparte entonces)