<p dir="auto">Here is a classic example of creating a React class in es6:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="export class Counter extends React.Component {
  componentWillReceiveProps(nextProps, nextContext) {
     ...
  }

  shouldComponentUpdate(nextProps, nextState, nextContext) { 
     ...
  }
  render() {
    ...
  }
}"><pre class="notranslate"><span class="pl-k">export</span> <span class="pl-k">class</span> <span class="pl-v">Counter</span> <span class="pl-k">extends</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span> <span class="pl-kos">{</span>
  <span class="pl-en">componentWillReceiveProps</span><span class="pl-kos">(</span><span class="pl-s1">nextProps</span><span class="pl-kos">,</span> <span class="pl-s1">nextContext</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
     ...
  <span class="pl-kos">}</span>

  <span class="pl-en">shouldComponentUpdate</span><span class="pl-kos">(</span><span class="pl-s1">nextProps</span><span class="pl-kos">,</span> <span class="pl-s1">nextState</span><span class="pl-kos">,</span> <span class="pl-s1">nextContext</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> 
     ...
  <span class="pl-kos">}</span>
  <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    ...
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">There are a few things I find bothersome with the lifecycle method names:</p>
<h1 dir="auto">Problem</h1>
<h2 dir="auto">Including 'component' in the method name is redundant</h2>
<p dir="auto">Since we are extending a class, Liskov substitution tells us that we the subclass we are implementing should implement the behaviors of <code class="notranslate">Component</code>. Since we know our class is a Component, saying <code class="notranslate">componentWillReceiveProps</code> is redundant, we could just as well say <code class="notranslate">willReceiveProps</code>.</p>
<p dir="auto">This redundancy may seem trivial, but it is more typing, more boilerplate, and thus, more error-prone.</p>
<h2 dir="auto">The name is non-orthogonal</h2>
<ol dir="auto">
<li><code class="notranslate">componentWillMount</code></li>
<li><code class="notranslate">componentDidMount</code></li>
<li><code class="notranslate">componentWillReceiveProps</code></li>
<li><code class="notranslate">shouldComponentUpdate</code> &lt;- <g-emoji class="g-emoji" alias="confused" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f615.png">😕</g-emoji></li>
<li><code class="notranslate">componentWillUpdate</code></li>
<li><code class="notranslate">componentDidUpdate</code></li>
<li><code class="notranslate">componentWillUnmount</code></li>
</ol>
<p dir="auto">I end up typing <code class="notranslate">componentShouldUpdate</code> more often than I would like to admit. At best, this is a distraction, at worst, it is a subtle source of bugs.</p>
<h1 dir="auto">Proposed Solution</h1>
<p dir="auto">Add alias methods fore the lifecycle methods</p>
<ol dir="auto">
<li><code class="notranslate">componentWillMount</code>             ----&gt; <code class="notranslate">willMount</code></li>
<li><code class="notranslate">componentDidMount</code>             ----&gt; <code class="notranslate">didMount</code></li>
<li><code class="notranslate">componentWillReceiveProps</code> ----&gt; <code class="notranslate">willReceiveProps</code></li>
<li><code class="notranslate">shouldComponentUpdate</code>      ----&gt; <code class="notranslate">shouldUpdate</code></li>
<li><code class="notranslate">componentWillUpdate</code>             ----&gt; <code class="notranslate">willUpdate</code></li>
<li><code class="notranslate">componentDidUpdate</code>            ----&gt; <code class="notranslate">didUpdate</code></li>
<li><code class="notranslate">componentWillUnmount</code>          ----&gt; <code class="notranslate">willUnmount</code></li>
</ol>
<p dir="auto">Now, this will obviously require a deprecation cycle as we need to warn users that are using these method names for other reasons. It seems to be somewhat common (a quick search on Github shows many people doing this).</p>
<h2 dir="auto">Conclusion</h2>
<p dir="auto">Although this may seem like bike-shedding, I think this is important and will save time/agony for the long future of React users (old and new).</p>
<p dir="auto"><g-emoji class="g-emoji" alias="heart" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/2764.png">❤️</g-emoji></p>
<p dir="auto">Pardon the stupid joke.</p>
<p dir="auto">I was curious what was the rationale (if there is one) behind having 'component' in the lifecycle methods. To me it seems unnecessary as they are clearly in the context of a component. What would make sense to me though is grouping the lifecycle methods like this:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class Example extends React.Component {

  lifecycle: {
    willMount() {...},
    didMount() {...},
    willReceiveProps() {...},
    //especially weird that shouldComponentUpdate is the only method that has 'component' in the middle
    shouldUpdate() {...},
    willUpdate() {...},
    didUpdate() {...},
    willUnmount() {...},
  }  

}"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-v">Example</span> <span class="pl-k">extends</span> <span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-c1">Component</span> <span class="pl-kos">{</span>

  <span class="pl-c1">lifecycle</span>: <span class="pl-kos">{</span>
    <span class="pl-en">willMount</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>...<span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-en">didMount</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>...<span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-en">willReceiveProps</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>...<span class="pl-kos">}</span><span class="pl-kos"></span><span class="pl-kos">,</span>
    <span class="pl-c">//especially weird that shouldComponentUpdate is the only method that has 'component' in the middle</span>
    <span class="pl-en">shouldUpdate</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos"></span> <span class="pl-kos">{</span>...<span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-en">willUpdate</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>...<span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-en">didUpdate</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>...<span class="pl-kos">}</span><span class="pl-kos">,</span>
    <span class="pl-en">willUnmount</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>...<span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-kos">}</span>  

<span class="pl-kos">}</span></pre></div>