I think we can simplify this logic a lot. We can just check if before scrolling on receiving a new message, if the current scroll height is less than the actual height. Makes sense? I think this solution is way to complex. Feel free if you want me to implement that and show you what I'm talking about.

@BrunoQuaresma that makes sense. Feel free to take a stab at it, thanks!

To add context why we're not pursuing a simpler approach: to determine if we should scroll down we need to check whether a user is scrolled to the bottom BEFORE adding a new message to the virtual DOM, but both useEffect and useLayoutEffect run AFTER. I don't know a React hook that would fit this use case and let us simplify the logic I initially submitted.