How to add a scroll to a React element?

Question

React

I'm making a chat component and I want it to immediately "scroll" down to the latest messages. Tried to do it with a ref, didn't help. The thing is that the element is shown with a delay (due to requests to the server) and the ref stops working. What to do?

const Chat = () => {
    const dispatch = useDispatch()
    const chatRef = useRef()
    const chat = useSelector(state => state.chat);
    const loading = useSelector(state => state.main.loading);
    useEffect(() => {
        dispatch(getChat())
    }, [])
    useEffect(() => {
        if(!loading && chat.messages) chatRef.current.scrollTo(0, 100)
    }, [chat])
  return (
    <div>
{loading ? 'loading':
        <div className="mt-3">
                <div>
                    <div ref={chatRef} style={{height: '65vh', overflow:'auto'}} >
                        {chat.messages.map(item => 
                                <p>{item.username}: {item.text}</p>
                        )}
                    </div>
                </div>
        </div>
            }
</div>
  )
}	

export default Chat;

Answer 1

Add a loading effect to the dependencies and go down to the height of the scroll.
Make sure chat.messages is falsy (if it's an empty array, then check as chat.messages.length).

useEffect(() => {
        if (!loading && chat.messages && chat.messages.length) {
            chatRef.current.scrollTop = chatRef.current.scrollHeight
        };
    }, [chat, loading])