beforeUpdate and afterUpdate

The beforeUpdate function schedules work to happen immediately before the DOM has been updated. afterUpdate is its counterpart, used for running code once the DOM is in sync with your data.

Together, they’re useful for doing things imperatively that are difficult to achieve in a purely state-driven way, like updating the scroll position of an element.

This Eliza chatbot is annoying to use, because you have to keep scrolling the chat window. Let’s fix that.

  1. let div;
  2. let autoscroll;
  4. beforeUpdate(() => {
  5.     autoscroll = div && (div.offsetHeight + div.scrollTop) > (div.scrollHeight - 20);
  6. });
  8. afterUpdate(() => {
  9.     if (autoscroll) div.scrollTo(0, div.scrollHeight);
  10. });

Note that beforeUpdate will first run before the component has mounted, so we need to check for the existence of div before reading its properties.