Progressive Web Apps with React

Scrolling down

Try making your browser smaller so that your list of messages is almost cut off; then, submit another message. Note that you have to scroll down to see it, if it's past the cut off of the message container. This is bad UX. Let's make it so that we automatically scroll down when a new message arrives.

In this section, we will dive into two powerful React concepts: the componentDidUpdate method, and refs.

Let's start by discussing what we want to achieve. We want our message container to be scrolled down to the bottom so that the most recent messages are always in view (unless the user decides to scroll up to see older messages). This means we need the message container to scroll down in two situations:

• When the first component ...