Slot-based composition

A.k.a Lifting element creation up

Bad case

Everytime you toggle sidebar, both heavy components re-render.

slow column

bunch of slow stuff

const Component = () => {
  const [isCollapsed, setIsCollapsed] = useState(false);

  return (
    <div className="container">
      <div className="sidebar" style={{ width: isCollapsed ? 10 : "auto" }}>
        <VerySlowComponent />
      </div>
      <div className="content">
        <button
          onClick={() => {
            setIsCollapsed(!isCollapsed);
          }}
        />
        <BunchOfSlowStuff />
      </div>
    </div>
  );
};

Fixed

Toggle sidebar, heavy components don't re-render.
Same logic as children, children is also just a prop.

slow column

bunch of slow stuff

const Layout = ({ column, content }) => {
  const [isCollapsed, setIsCollapsed] = useState(false);

  return (
    <div className="container">
      <div className="sidebar" style={{ width: isCollapsed ? 10 : "auto" }}>
        {column}
      </div>
      <div className="content">
        <button
          onClick={() => {
            setIsCollapsed(!isCollapsed);
          }}
        />
        {content}
      </div>
    </div>
  );
};

const Component = () => {
  return <Layout column={<VerySlowComponent />} content={<BunchOfSlowStuff />} />;
};