import React, { ReactNode, useContext, useEffect, useMemo, useReducer, useState } from 'react'; import { AnotherVerySlowComponent, VerySlowComponent } from './components/very-slow-component'; import './styles.css'; type State = { isNavExpanded: boolean }; const defaultState: State = { isNavExpanded: false }; // store the state here const ContextData = React.createContext(defaultState); // store the open/close functions here const ContextApi = React.createContext({ open: () => {}, close: () => {}, toggle: () => {} }); type Action = { type: 'open-sidebar' | 'close-sidebar' | 'toggle-sidebar' }; const reducer = (state: State, action: Action): State => { switch (action.type) { case 'open-sidebar': return { ...state, isNavExpanded: true }; case 'close-sidebar': return { ...state, isNavExpanded: false }; case 'toggle-sidebar': // we'll have access to the old value here - it's our "state" // so just flip it around return { ...state, isNavExpanded: !state.isNavExpanded }; } return state; }; const NavigationController = ({ children }: { children: ReactNode }) => { const [state, dispatch] = useReducer(reducer, defaultState); // that one has a dependency on state const data = useMemo(() => ({ isNavExpanded: state.isNavExpanded }), [state]); // that one never changes - no dependencies const api = useMemo(() => { return { open: () => dispatch({ type: 'open-sidebar' }), close: () => dispatch({ type: 'close-sidebar' }), toggle: () => dispatch({ type: 'toggle-sidebar' }), }; // don't depend on the state directly anymore! }, []); return ( {children} ); }; const useNavigationData = () => useContext(ContextData); const useNavigationApi = () => useContext(ContextApi); const AdjustableColumnsBlock = () => { const { isNavExpanded } = useNavigationData(); return isNavExpanded ?

two block items here

three block items here

; }; const SomeComponent = () => { const { toggle } = useNavigationApi(); useEffect(() => { console.info("SomeComponent won't re-render on navigation expand/collapse, even though it uses Context"); }); return (

); }; const MainPart = () => { return ( <> ); }; const ExpandButton = () => { const { isNavExpanded } = useNavigationData(); const { toggle } = useNavigationApi(); useEffect(() => { console.info("Button that uses Context data re-renders. But SomeComponent won't"); }); return ; }; const SidebarLayout = ({ children }: { children: ReactNode }) => { const { isNavExpanded } = useNavigationData(); return (

{children}

); }; const Sidebar = () => { return ( {/* this one will control the expand/collapse */}

some links

); }; const Layout = ({ children }: { children: ReactNode }) => { const [scroll, setScroll] = useState(0); useEffect(() => { window.addEventListener('scroll', () => { setScroll(window.scrollY); }); }, []); return (

{children}

); }; const Page = () => { return ( ); }; export default function App() { return ( <>

Very slow "Page" component - click on expand/collapse to toggle nav

Those components that use only API won't re-render on nav expand/collapse anymore

); }