import React, { ReactNode, useCallback, useContext, useEffect, useMemo, useState } from 'react'; import { AnotherVerySlowComponent, VerySlowComponent } from './components/very-slow-component'; import './styles.css'; const Context = React.createContext({ isNavExpanded: false, toggle: () => {}, }); const NavigationController = ({ children }: { children: ReactNode }) => { const [isNavExpanded, setIsNavExpanded] = useState(false); const toggle = useCallback(() => { setIsNavExpanded(!isNavExpanded); }, [isNavExpanded]); const value = useMemo(() => { return { isNavExpanded, toggle }; }, [isNavExpanded, toggle]); return {children}; }; const useNavigation = () => useContext(Context); const AdjustableColumnsBlock = () => { const { isNavExpanded } = useNavigation(); return isNavExpanded ?

two block items here

three block items here

; }; const MainPart = () => { return ( <> ); }; const ExpandButton = () => { const { isNavExpanded, toggle } = useNavigation(); useEffect(() => { console.info('Button that uses Context re-renders'); }); return ; }; const SidebarLayout = ({ children }: { children: ReactNode }) => { const { isNavExpanded } = useNavigation(); 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

Scrolling won't affect re-renders anymore - provider's value is memoized

); }