Skip to content
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

Should renderToString call life cycle methods? #2674

Closed
ottis opened this issue Dec 8, 2014 · 2 comments
Closed

Should renderToString call life cycle methods? #2674

ottis opened this issue Dec 8, 2014 · 2 comments

Comments

@ottis
Copy link

ottis commented Dec 8, 2014

Came across this whilst investigating another unrelated issue (page requesting route twice). When we call renderToString on the server, React will try and call:

var markup = componentInstance.mountComponent(id, transaction, emptyObject);
return ReactMarkupChecksum.addChecksumToMarkup(markup);

Calling mountComponent in turn triggers the life cycle method componentWillMount, which seems odd to me as it essentially isn't being mounted, it's only utilizing this method (as far as I can see) to generate the markup thus has a broken life cycle.

return ReactMarkupChecksum.addChecksumToMarkup(markup);

Not having a symmetrical life cycle can lead to odd issues with lingering objects e.g. when component listens for events outside it's own life cycle in componentWillMount and does not get a proper componentWillUnmount call, it does not get a chance to clean up it's references.

The main question is should the renderToString method invoke life cycle methods at all, as they'll never have a complete cycle? I understand we could just move bindings to componentDidMount but it still seems wrong to me to have an asymmetric life cycle. Perhaps we could block the call to componentWillMount by including

if (inst.componentWillMount && typeof window !== 'undefined') {

so it doesn't run when called server side?

Just some thoughts anyway :) really enjoying React!

@zpao
Copy link
Member

zpao commented Dec 8, 2014

It's true the "lifecycle" is not really a cycle on the server. componentWillMount is called but the rest aren't. We've documented this for a long time as the exception. The reasoning is that componentWillMount can actually affect state before initial render so we do need to make sure it's called on the server. If we only called it on the client then the initial render could be different and the whole checksum would fail. We have considered forbidding the call to setState in componentWillMount, which would eliminate the need to call it on the server but until then (if it happens) it is necessary.

For your case with listeners and whatnot, it's probably better to set those up in componentDidMount.

@zpao zpao closed this as completed Dec 8, 2014
@ottis
Copy link
Author

ottis commented Dec 9, 2014

Cool, thanks for the reasoning behind it. I'll keep my ear to the ground should anything change with componentWillMount

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

2 participants