Search⌘ K
Home
Courses
Understanding Redux: A Beginner's Guide To State Management

Tweak: Scroll Removal for New Messages

Understand how to use React refs and lifecycle methods to automatically scroll the chat window to the latest message when the component mounts or updates, enhancing chat app functionality.

We'll cover the following...

Let’s make sure the chat window scrolls when updated.

To do this we’ll need a bit of DOM manipulation. This is the reason I insisted on making <Chats /> a class component.

Okay, let’s talk code.

Firstly, we need to create a Ref to hold the Chats DOM Node.

Javascript (babel-node)
constructor(props) {
  super(props);
  this.chatsRef = React.createRef();
}

If you’re not familiar with ...