Bug: Does React automatically handle scrolling for me?

[kajweb]

React version:
NULL

Steps To Reproduce

I provided both a vanilla JS version and a React version and found that there are differences between the two.
After entering the webpage, click the "L button" first, move the scrollbar to the bottom,
then click the "M button", and then click the "L button" again.

Link to code example:
https://codesandbox.io/s/react-scroll-top-cvge7z
https://codesandbox.io/s/vanilla-scroll-top-yckxwd

The expected behavior

You can see that in React, the scrollbar is at the bottom, while in vanilla JS it behaves as expected.

[umang-bhatt]

@kajweb
Try this to achieve the same behaviour as expected in vanilla script

import "../App.css";
import { useRef, useEffect, useState } from "react";

export default function Scroller() {
    const [data, setData] = useState("");

    const ref = useRef(null);
    const [scrollPosition, setScrollPosition] = useState(0);

    useEffect(() => {
        ref.current.scrollTop = scrollPosition;
    }, [scrollPosition]);


    const changeText = (type) => {
        setData(
            [
                ...Array(
                    {
                        S: 1,
                        M: 1000,
                        L: 5000,
                        LP: 5000
                    }[type]
                )
            ]
                .map((i) => type)
                .join(" ")
        );
        setScrollPosition(ref.current.scrollTop);
    }

    return (
        <div>
            <div className="flex items-center justify-center">
                <div
                    style={{
                        height: 600,
                        width: 300,
                        border: "1px solid #ccc",
                        overflow: "auto"
                    }}
                    ref={ref}
                >
                    {data}
                </div>
            </div>

            <div className="flex gap-2">
                {/* <button onClick={() => changeText("S")}>S</button> */}
                <button onClick={() => changeText("M")}>M</button>
                <button onClick={() => changeText("L")}>L</button>
                <button onClick={() => changeText("LP")}>LP</button>
            </div>
        </div>
    );
}

Hope this helps !

[kajweb]

It worked.

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[kajweb]

any comment

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!