Prevent Child Re-Render

[isaacwasserman]

Scrolling within a component that uses useStickToBottom seems to trigger a re-render (and a re-render of all its children). Is there a way to prevent this?

[Lalit9025]

Can you assign me this issue ? I want to work on it.

[samdenty]

@Lalit9025 🫡 🙏

[samdenty]

@isaacwasserman do you mean one of these?

use-stick-to-bottom/src/useStickToBottom.ts

Lines 130 to 132 in 3bee193

	const [escapedFromLock, updateEscapedFromLock] = useState(false);
	const [isAtBottom, updateIsAtBottom] = useState(options.initial !== false);
	const [isNearBottom, setIsNearBottom] = useState(false);

if so those are set as state so your app can utilize them. If the component is getting re-rendered on each scroll event that's bad and shouldn't happen, that's why there's the

use-stick-to-bottom/src/useStickToBottom.ts

Lines 147 to 148 in 9e90c1d

	const state = useMemo<StickToBottomState>(() => {
	let lastCalculation: { targetScrollTop: number; calculatedScrollTop: number } | undefined;

state object that lives outside the react state

[isaacwasserman]

@samdenty not sure what you mean. I'm not currently using any of these states, but my element is being re-rendered on scroll.

[samdenty]

@isaacwasserman can you create a demo on stackblitz.com? alternatively if you install something like react-scan or https://github.com/welldone-software/why-did-you-render and can show the culprit of the re-renders that'd be amazing (just to pinpoint it to this library). How many re-renders are there? is it just one re-render when you start scrolling, or continuous re-renders throughout the scrolling

[isaacwasserman]

I used the Chrome's React devtools to profile for a few seconds while I scrolled up and down repeatedly:

OttoChat is the component that has the useStickToBottom hook. In the screenshot, you can see that it re-rendered because of hook 6. If we go to the component pane:

Hook 6 is the first hook of useStickToBottom (escapedFromLock). I've also seen it be the third hook of useStickToBottom (isNearBottom).

~80% of those renders say they were because of those hooks.

Any ideas?