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: () => {}, close: () => {}, open: () => {}, }); const NavigationController = ({ children }: { children: ReactNode }) => { const [isNavExpanded, setIsNavExpanded] = useState(false); const toggle = useCallback(() => { setIsNavExpanded(!isNavExpanded); }, [isNavExpanded]); const open = useCallback(() => { setIsNavExpanded(true); }, []); const close = useCallback(() => { setIsNavExpanded(false); }, []); const value = useMemo(() => { return { isNavExpanded, toggle, close, open }; }, [isNavExpanded, toggle, close, open]); return {children}; }; const useNavigation = () => useContext(Context); const AdjustableColumnsBlock = () => { const { isNavExpanded } = useNavigation(); return isNavExpanded ?

two block items here

three block items here

; }; const withNavigationOpen = (AnyComponent: any) => { // wrap the component from the arguments in React.memo here const AnyComponentMemo = React.memo(AnyComponent); return (props: any) => { const { open } = useContext(Context); // return memoized component here // now it won't re-render because of Context changes // make sure that whatever is passed as props here don't change between re-renders! return ; }; }; const MainPart = withNavigationOpen(({ openNav }: { openNav: () => void }) => { useEffect(() => { // won't be triggered when context value changes // because toggleNav is coming from memoized HOC console.info('Main part re-render'); }); 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 causes re-render of everything that uses Context

); }