import React, { ReactNode, useState } from 'react'; import { AnotherVerySlowComponent, VerySlowComponent } from './components/very-slow-component'; import './styles.scss'; const AdjustableColumnsBlock = ({ isNavExpanded }: { isNavExpanded: boolean }) => { return isNavExpanded ?

two block items here

three block items here

; }; const MainPart = ({ isNavExpanded }: { isNavExpanded: boolean }) => { return ( <> ); }; type ExpandProps = { isNavExpanded: boolean; toggleNav: () => void }; const ExpandButton = ({ isNavExpanded, toggleNav }: ExpandProps) => ( ); const Sidebar = ({ isNavExpanded, toggleNav }: ExpandProps) => { return (

{/* this one will control the expand/collapse */}

some links

); }; const Layout = ({ children }: { children: ReactNode }) =>

{children}

; const Page = () => { const [isNavExpanded, setIsNavExpanded] = useState(false); return ( setIsNavExpanded(!isNavExpanded)} /> ); }; export default function App() { return ( <>

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

everything re-renders on every toggle

); }

Chapter 8. Example 1