Wrap state around children

some text
some text
some text
some text
some text
some text

Heavy component

const Parent = () => {
  return (
    <>
      <ComponentWithScroll>
        <HeavyComponent />
      </ComponentWithScroll>
      <button>re-render parent</button>
    <>
  );
};

The state scrollY is changing in the wrapper only. Not re-rendering the heavy component.
When parent re-renders, both wrapper and HeavyComponent re-render.

const ComponentWithScroll = ({ children }) => {
  const [scrollY, setScrollY] = useState(0);
  console.log("ComponentWithScroll renders >> ", scrollY);
  const onScroll = ({ currentTarget }) => setScrollY(currentTarget.scrollTop);

  return <div onScroll={onScroll}>{children}</div>;
};

Why? - children are immutable React element objects passed by reference
They are values, not templates.