react-window scroll to bottom

Question

I'm using react-window to render a long list to show messages. but how can I move scroll to bottom for each new messages?

I could handle it for normal Div by using useRef, but what about react-window?

const list = useRef<HTMLDivElement>(document.createElement('div'));

  useEffect(() => {
    list.current.scrollTop = list.current.scrollHeight;
  }, [message]);

and:

<FixedSizeList
  width="100%"
  height={500}
  itemCount={messages.length}
  itemSize={40}
  itemData={messages}
 >
    {Row}
 </FixedSizeList>

Answer 1

I'd create a ref to attach to FixedSizeList, then create a function that scrolls to the bottom of that list and have an effect that listens to when a new item is added to the list. Something like:

function ListComponent({ messages }) {
  const listRef = useRef(null);
  
  const scrollToBottom = () =>
      listRef?.current.scrollToItem(messages.length);

  useEffect(() => {
    scrollToBottom();
  }, [messages]);

  return (
    <FixedSizeList
      width="100%"
      height={500}
      itemCount={messages.length}
      itemSize={40}
      itemData={messages}
      ref={listRef}
    >
      {Row}
    </FixedSizeList>
  );
}