React scroll into view last item added in a list

DanielJanuary 27, 2023One Comment

What if we want to scroll to view the last element added to a React list? Or actually any array style elements?

See the below video for the full example:

We will start with this basic setup:

const App = () => {
  const [items, setItems] = useState([]);

  const handleAddClick = () => {
    setItems((items) => [
      ...items,
      {
        id: Math.random().toString(16).substr(2),
        label: "LABEL: " + Math.random().toString(16).substr(2)
      }
    ]);
  };

  return (
    <>
      <button onClick={handleAddClick}>Add list item ({items.length})</button>
      <ul>
        {items.map((i) => (
          <li key={i.id}>{i.label}</li>
        ))}
      </ul>
    </>
  );
};

What the above code will do is generate some random items and add them to a list.

However when new items are added no scroll happens.

We have seen in a previous article how to scroll to a React element when a button is clicked, by using a combination of scrollIntoView() view and the ref hook.

The ref.current gives us access to the actual HTML element. Any element HTML element has a lastElementChild property that points to the element's last child. In the case of a list, this will point to the last element added to a list.

Therefore we can simply do something like this:

listRef.current?.lastElementChild?.scrollIntoView()

Where listRef is the reference to our list.

You can check out below the full code:

const App = ()=> {
  const listRef = useRef(null);
  const [items, setItems] = useState([]);

  useEffect(() => {          
    listRef.current?.lastElementChild?.scrollIntoView();
  }, [items]);

  const handleAddClick = () => {
      setItems((items) => [
        ...items,
        {
          id: Math.random().toString(16).substr(2),
          label: 'LABEL: ' + Math.random().toString(16).substr(2),
        },
      ]);
  };

  return (
    <>
      <ul ref={listRef}>
        {items.map((i) => (
          <li key={i.id}>{i.label}</li>
        ))}
      </ul>
      <button onClick={handleAddClick}>Add list item ({items.length})</button>
    </>
  );
}

And here is the working codepen for this example.