Skip to content

Why unmount on page change? #296

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
markbrown4 opened this issue Jun 15, 2015 · 5 comments
Closed

Why unmount on page change? #296

markbrown4 opened this issue Jun 15, 2015 · 5 comments

Comments

@markbrown4
Copy link
Contributor

"On page load, the react_ujs driver will scan the page and mount components using data-react-class and data-react-props. Before page unload, it will unmount components (if you want to disable this behavior, remove data-react-class attribute in componentDidMount)."

Why is this the default? Removing chunks of the DOM when changing pages seems strange.

componentDidMount: ->
  @getDOMNode().parentNode.removeAttribute('data-react-class')
@danott
Copy link
Contributor

danott commented Jun 15, 2015

Someone else can correct me if I'm wrong, but I understood that the motivation is so that multiple calls to ReactRailsUJS.mountComponents don't clobber an already mounted component. If, for instance, an ajax call adds some content to the page, and a call is made to ReactRailsUJS.mountComponents, the minimal number of React.render calls are needed to get the DOM to the desired state.

@markbrown4
Copy link
Contributor Author

My question was regarding the last part of that sentence to do with the unmounting on page unload.

A full page change always blows away the DOM and starts again, can't think of a valid reason for doing extra work and causing re-rendering / painting before navigating. For things like turbolinks this may make sense but there's special events you can use in those cases.

Specifically why the need to unmount in handleNativeEvents here
https://github.com/reactjs/react-rails/blob/master/lib/assets/javascripts/react_ujs.js.erb#L89

@rmosolgo
Copy link
Member

For me, it just seems like the "right" thing to do: React components have lifecycle hooks and it seems good to run through them. If people want to skip those lifecycle hooks, ok, go for it, but executing them seems like a good default behavior.

I imagine another simple work around would be:

ReactRailsUJS.unmountComponents = function() {}

Do you know how any other React + server framework libraries handle it? Do they unmount on unload?

@markbrown4
Copy link
Contributor Author

Disagree with you there, it's the wrong thing to do on page unload. The only time it makes sense is for single page apps.

The way it behaves currently is really strange from a ux perspective and just unnecessary work for the browser slowing down page changes.

@rmosolgo
Copy link
Member

rmosolgo commented Jul 9, 2015

I definitely see your point, I'm open to a PR with a better handling of this case!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants