<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">Bug</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">The unsafe lifecycle function aliases in 16.3.2 are not merged when defined more than once because of mixins, triggering an error:</p>
<blockquote>
<p dir="auto">Uncaught Error: ReactClassInterface: You are attempting to define <code class="notranslate">UNSAFE_componentWillReceiveProps</code> on your component more than once. This conflict may be due to a mixin.</p>
</blockquote>
<p dir="auto">To reproduce: rename all cWM, cWRP, and cWU functions with their UNSAFE_ versions in a project where mixins cause those functions to be duplicated</p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">That these lifecyle function continue to work as expected when called via UNSAFE aliases in 16.3, and if they are not supposed to with regard to redefining/merging, that the migration path documentation is updated to indicate so.</p>
<p dir="auto">I'm trying to run this snippet:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="class Container extends React.Component {
  constructor() {
    super();
​
    this.state = {
      text: '...',
    };
  }
​
  componentDidMount() {
    fetch(urlThatReturnsSomeText)
      .then(res =&gt; res.text())
      .then(text =&gt; this.setState({ text }));      
  }
​
  render() {
    return &lt;div&gt;{this.state.text}&lt;/div&gt;;
  }
}"><pre class="notranslate"><code class="notranslate">class Container extends React.Component {
  constructor() {
    super();
​
    this.state = {
      text: '...',
    };
  }
​
  componentDidMount() {
    fetch(urlThatReturnsSomeText)
      .then(res =&gt; res.text())
      .then(text =&gt; this.setState({ text }));      
  }
​
  render() {
    return &lt;div&gt;{this.state.text}&lt;/div&gt;;
  }
}
</code></pre></div>
<p dir="auto">It causes the warning. I noticed, that <code class="notranslate">setState</code> triggers <code class="notranslate">componentWillUnmount</code> hook in React 16.<br>
Hooks are consoled in the next order:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="componentWillMount
componentDidMount
componentWillMount
componentWillUnmount
componentDidMount"><pre class="notranslate"><code class="notranslate">componentWillMount
componentDidMount
componentWillMount
componentWillUnmount
componentDidMount
</code></pre></div>
<p dir="auto">In previous version component only was mounting twice (that behavior is also a bit strange to me).<br>
When it comes to only <code class="notranslate">setState</code> without any data fetching everything works fine.</p>