Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Upgrade to latest version introduced componentDidUpdate / DOM issues

See original GitHub issue

Do you want to request a feature or report a bug? Bug (I think - certainly could be a problem with our implementation)

After upgrading from ^5.0.7 to latest (^7.1.1), mostly just to quiet deprecation warnings, I noticed that our message container div in our chat app was not scrolling all of the way to the bottom on new messages.

In componentDidUpdate(), we determine if the message count changed and then set scrollTop to the scrollHeight. I noticed that scrollHeight was no longer changing when a new message was received. I’m not sure why a change in react-redux would alter how componentDidUpdate() sees what should be a change to the DOM after render().

Reverting back to ^5.07 solved the issue.

We are using react ^16.3.2, react-dom ^16.3.2 & Chrome 76.0.3809.132.

Issue Analytics

State:
Created 4 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

1reaction

timdorrcommented, Sep 12, 2019

Can you provide a simplified code example? Codesandbox.io is a good place to set that up.

0reactions

mstange22commented, Oct 14, 2019

Thank for the link. Seems to be an identical use case. I ended up moving the scrollHeight inspection to the child component.

Top Results From Across the Web

How does React componentDidUpdate work - Linguine Code

React componentDidUpdate get's called after a React component props or state has changed. componentDidUpdate is also a good place to do DOM manipulation, ......

Post-Render with componentDidUpdate() · react-indepth

When using 3rd Party libraries, like our Chart example, we need to update the UI library with new data. componentDidUpdate(prevProps, prevState) { //...

Using componentDidUpdate in React -- newline - Fullstack.io

In this article we will see how to use the componentDidUpdate function in React components to respond to changes. This can be external...

Props updated, componentDidUpdate did not fire

There are 3 conditions that can cause componentDidUpdate to not fire: 1) You wrote a custom shouldComponentUpdate that returned false.

Using React componentDidUpdate() — React Hooks

ComponentDidUpdate is a React component lifecycle method invoked immediately after a component's updates are flushed to the DOM.