169 - re-render 2 - react

[kenmori]

App.jsx

import { useState, useDeferredValue } from 'react';

import { MovingBlock } from "./components/moving-block";
import { VerySlowComponent } from './components/very-slow-component';
import { BunchOfStuff, OtherStuffAlsoComplicated } from './components/mocks';

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

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

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

// just hard-coded approximation to demonstrate the re-renders problem
// not to be used in real code
const getPosition = (val) => 150 - val / 2;

[jsartisan]

@kenmori This solution is not working as expected. If you see we are not able to see the new scroll position getting updated on scroll immediately.