#169 re-render 2

easy

react

performance

Imagine an app that includes a scrollable content area. You were required to add a moving block that shows current scroll position. The code looks like this after implementation:

export default function App() {
  const [position, setPosition] = useState(150);

  const onScroll = (e: any) => {
    const calculated = getPosition(e.target.scrollTop);
    setPosition(calculated);
  };

  return (
    <div className="scrollable-block" onScroll={onScroll}>
      <MovingBlock position={position} />
      <VerySlowComponent />
      <BunchOfStuff />
      <OtherStuffAlsoComplicated />
    </div>
  );
}

But the implementation was not optimial, because of state updates, the VerySlowComponent re-renders as well making the moving block laggy. How can we optimize this?