Estoy usando useContext para la administración de estado global con useReducer. Estoy usando WebSocket para recuperar datos de bitcoin cada segundo. Debido a que los datos cambian con frecuencia, mi aplicación se vuelve a procesar cada segundo y tengo cálculos de datos pesados, interfaz de usuario compleja con tablas y etc. Aunque ningún componente es un consumidor de datos de bitcoin, de todos modos, cada componente se vuelve a procesar cada vez que se modifican sus datos.

este es el proveedor de contexto.

 const AppContext = createContext<{ state: InitialStateType; dispatch: Dispatch<ActionType>; }>({ state: initialState, dispatch: () => null, }); const mainReducer: MainReducer = ({btc, common, user }, action) => ({ btc: btcReducer<BTCPayload>(btc, action as BTCReducerActions), user: userReducer<UserPayload>(user, action as UserReducerActions), common: commonReducer<CommonPayload>(common, action as CommonReducerActions), }); const AppProvider: React.FC = ({ children }) => { const [state, dispatch] = useReducer(mainReducer, initialState); return ( <AppContext.Provider value={{ state, dispatch }}> {children} </AppContext.Provider> ); }; export { AppProvider, AppContext };

Y aquí está el envoltorio de la aplicación.

 <AppProvider> <ThemeProvider theme={theme}> <GlobalStyles /> <BrowserRouter> <div className="App"> <AppRoot isBusy={!ready || !isConnected} /> </div> </BrowserRouter> </ThemeProvider> </AppProvider>

He intentado crear proveedores separados, uno para los datos btc y otro para el resto de los datos, pero funciona igual, porque supongo que la razón es que toda la aplicación está dentro de ese proveedor de contexto.

 const AppProvider: React.FC = ({ children }) => { const [state, dispatch] = useReducer(mainReducer, initialState); const appValue = useMemo(() => { return { state, dispatch }; }, [state]); const btcValue = useMemo(() => { return { btc }; }, [btc]); return ( <AppContext.Provider value={appValue}> <BtcContext.Provider value={btcValue}> {children} </BtcContext.Provider> </AppContext.Provider> ); };

Estoy luchando casi 2 días. Necesito empaquetar toda la aplicación con el proveedor porque hay más de 10 componentes que usan datos btc en diferentes rutas.