<p dir="auto"><strong>What is the current behavior?</strong><br>
Currenty render method is invoking even I am returned null in the getDerivedStateFromProps irrespective of whether props changed or not (just to check the behavior).</p>
<p dir="auto">Here is CodeSandBox link:</p>
<p dir="auto"><strong><a href="https://codesandbox.io/s/7wy6xm1z10" rel="nofollow">https://codesandbox.io/s/7wy6xm1z10</a></strong></p>
<p dir="auto">Expected behavior : Not to invoke render method.</p>
<p dir="auto"><strong>React version: 16.6.3</strong></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import React from &quot;react&quot;;
class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hello: &quot;sam&quot; };
  }

  static getDerivedStateFromProps(props, state) {
    console.log(&quot;getDerivedStateFromProps &quot;, props, state);
    return null;
  }

  render() {
    console.log(&quot;render&quot;, this.state);
    return (
      &lt;React.Fragment&gt;
        Hello
        &lt;hr /&gt;
        &lt;button
          onClick={() =&gt;
            this.setState(() =&gt; {
              return { name: &quot;Kiran&quot; };
            })
          }
        &gt;
          click me
        &lt;/button&gt;
      &lt;/React.Fragment&gt;
    );
  }
  componentDidMount() {
    this.state = { HEHE: &quot;HEHE&quot; };
    console.log(&quot;DidMount&quot;);
  }

  getSnapshotBeforeUpdate() {
    console.log(&quot;getsnapshotbeforeupdate&quot;);
    return 12;
  }
  componentDidUpdate(props, state, snapshot) {
    console.log(&quot;DId Update&quot;, props, state, snapshot);
  }
  componentWillUnMount() {
    console.log(&quot;Will Unmount&quot;);
  }
}

export default Demo;"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-v">React</span> <span class="pl-k">from</span> <span class="pl-s">"react"</span><span class="pl-kos">;</span>
<span class="pl-k">class</span> <span class="pl-v">Demo</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">constructor</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">super</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">hello</span>: <span class="pl-s">"sam"</span> <span class="pl-kos">}</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-k">static</span> <span class="pl-en">getDerivedStateFromProps</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">,</span> <span class="pl-s1">state</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"getDerivedStateFromProps "</span><span class="pl-kos">,</span> <span class="pl-s1">props</span><span class="pl-kos">,</span> <span class="pl-s1">state</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">return</span> <span class="pl-c1">null</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-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"render"</span><span class="pl-kos">,</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">return</span> <span class="pl-kos">(</span>
      <span class="pl-c1">&lt;</span><span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-v">Fragment</span><span class="pl-c1">&gt;</span>
        Hello
        <span class="pl-c1">&lt;</span><span class="pl-ent">hr</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span>
        <span class="pl-c1">&lt;</span><span class="pl-ent">button</span>
          <span class="pl-c1">onClick</span><span class="pl-c1">=</span><span class="pl-kos">{</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span>
            <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-en">setState</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
              <span class="pl-k">return</span> <span class="pl-kos">{</span> <span class="pl-c1">name</span>: <span class="pl-s">"Kiran"</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-c1">&gt;</span>
          click me
        <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">button</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-v">React</span><span class="pl-kos">.</span><span class="pl-v">Fragment</span><span class="pl-c1">&gt;</span>
    <span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
  <span class="pl-en">componentDidMount</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">state</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> <span class="pl-c1">HEHE</span>: <span class="pl-s">"HEHE"</span> <span class="pl-kos">}</span><span class="pl-kos">;</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"DidMount"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  <span class="pl-en">getSnapshotBeforeUpdate</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"getsnapshotbeforeupdate"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">return</span> <span class="pl-c1">12</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
  <span class="pl-en">componentDidUpdate</span><span class="pl-kos">(</span><span class="pl-s1">props</span><span class="pl-kos">,</span> <span class="pl-s1">state</span><span class="pl-kos">,</span> <span class="pl-s1">snapshot</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"DId Update"</span><span class="pl-kos">,</span> <span class="pl-s1">props</span><span class="pl-kos">,</span> <span class="pl-s1">state</span><span class="pl-kos">,</span> <span class="pl-s1">snapshot</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
  <span class="pl-en">componentWillUnMount</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">"Will Unmount"</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">export</span> <span class="pl-k">default</span> <span class="pl-v">Demo</span><span class="pl-kos">;</span></pre></div>
<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">Returning <code class="notranslate">null</code> from <code class="notranslate">getDerivedStateFromProps</code> triggers updates and <code class="notranslate">componentDidUpdate</code> is being called.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (<a href="https://jsfiddle.net/Luktwrdm/" rel="nofollow">https://jsfiddle.net/Luktwrdm/</a>) or CodeSandbox (<a href="https://codesandbox.io/s/new" rel="nofollow">https://codesandbox.io/s/new</a>) example below:</strong></p>
<p dir="auto"><a href="https://jsfiddle.net/69z2wepo/328290/" rel="nofollow">https://jsfiddle.net/69z2wepo/328290/</a></p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto"><code class="notranslate">componentDidUpdate</code> and <code class="notranslate">render</code> methods should not be called.</p>