React: Lifecycle methods for ReactDOM.hydrate

[jamesknelson]

Do you want to request a feature or report a bug?

Feature

What is the current behavior?

There is no way to distinguish if a componentDidMount or componentWillMount lifecycle method was called in response to a call to ReactDOM.hydrate.

What is the expected behavior?

I have a component that scrolls to the top of the page in componentDidMount. This makes sense when the component is first created within the client. However, it doesn't make sense when the component has been hydrated, as componentDidMount is called after the content is already visible, and possibly after the user has already scrolled.

Would it be possible to add a componentWillHydrate lifecycle method? Then I could do something like this to achieve the desired behavior:

componentWillHydrate() {
  this.hydrated = true 
}
componentDidMount() {
  if (!this.hydrated) {
    this.scrollToTop()
  }
}

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

All

[rockieroshan]

Hello,

Im a rookie. i would like to contribute and learn something.

How do i do that?
it would be great if you could help me out.

Thanks

[gaearon]

@rockieroshan Watch issues tagged with "good first bug" label. Please don't post unrelated questions in other issues so we keep the discussion focused.

[NE-SmallTown]

How about:

1. Call scrollToTop in cWM or constrcutor (before you need run something like if (isClient) {...})

2. For scroll, listen the scroll event, do scrollToTop before user see your component (give 100px or more offset)

[jamesknelson]

@NE-SmallTown I've ended up doing something pretty similar 👍

My thought is that componentWillHydrate would make this cleaner, as it would eliminate the need to pass isClient (or similar) into the component via props.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!