リンクに応じた以下のコードは、反応すると次のように述べています。
残念ながら、これによりサーバー レンダリングでメモリ リークが発生する可能性があります (componentWillUnmount が呼び出されることはありません)。
// Before
class ExampleComponent extends React.Component {
componentWillMount() {
this.setState({
subscribedValue: this.props.dataSource.value,
});
// This is not safe; it can leak!
this.props.dataSource.subscribe(
this.handleSubscriptionChange
);
}
componentWillUnmount() {
this.props.dataSource.unsubscribe(
this.handleSubscriptionChange
);
}
handleSubscriptionChange = dataSource => {
this.setState({
subscribedValue: dataSource.value,
});
};
}
これがサーバー側でメモリリークになる可能性があることを理解できません。たとえば、サーバー側でレンダリングされるこのコードがあり、ExampleComponent にメモリ リークが含まれているとします。
import React from 'react';
import ReactDomServer from 'react-dom/server';
import App from './components/index'
const serverRender = () =>{
return ReactDomServer.renderToString(<ExampleComponent />);
};
export default serverRender;
これがクライアントに返されると、レンダリングされたコンポーネントはどこにもアタッチされておらず、GB を収集する準備ができています。では、なぜメモリ リークが発生するのでしょうか。