title: shouldComponentUpdate equivalent for functional component, to ignore state changes
body: <p>My code has a component that takes both props and has its own internal state.<br>
  The component should rerender ONLY when its props change. State changes should NOT trigger a rerender.<br>
  This behaviour can be implemented with a class based component and a custom <code>shouldComponentUpdate</code> function.<br>
  However, this would be the first class based component in the codebase. Everything is done with functional components and hooks.
  Therefore I would like to know whether it is possible to code the desired functionality with functional components.</p>
  
  <p>After a few answers that didn't approach the real problem, I think I have to reformulate my question. Here is a minimal example with two components:</p>
  
  <ul>
  <li>Inner takes a prop and has state. This is the component in question. It must not rerender after state changes. Prop changes should trigger a rerender.</li>
  <li>Outer is a wrapper around inner. It has no meaning in the scope of this question and is only there to give props to Inner and to simulate prop changes.</li>
  </ul>
  
  <p>To demonstrate the desired functionality I have implemented Inner with a class based component. <a href="https://codesandbox.io/s/vigilant-morse-i7r3t" rel="nofollow noreferrer">A live version of this code can be found on codesandbox</a>. How can I migrate it to a functional component:</p>
  
  <p><code>Inner.tsx</code>:</p>
  
  <pre><code>import React, { Component } from 'react'
  
  interface InnerProps{outerNum:number}
  interface InnerState{innerNum:number}
  
  export default class Inner extends Component&lt;InnerProps, InnerState&gt; {
      state = {innerNum:0};
  
      shouldComponentUpdate(nextProps:InnerProps, nextState:InnerState){
          return this.props != nextProps;
      }
      render() {
          return (
              &lt;button onClick={()=&gt;{
                  this.setState({innerNum: Math.floor(Math.random()*10)})
              }}&gt;
                  {`${this.props.outerNum}, ${this.state.innerNum}`}
              &lt;/button&gt;
          )
      }
  }
  </code></pre>
  
  <p>Outer.tsx:</p>
  
  <pre><code>import React, { useState } from "react";
  import Inner from "./Inner";
  
  export default function Outer() {
    const [outerState, setOuterState] = useState(1);
  
    return (
      &lt;&gt;
        &lt;button
          onClick={() =&gt; {
            setOuterState(Math.floor(Math.random() * 10));
          }}
        &gt;
          change outer state
        &lt;/button&gt;
        &lt;Inner outerNum={outerState}&gt;&lt;/Inner&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  
  <p><a href="https://reactjs.org/docs/hooks-faq.html#how-do-i-implement-shouldcomponentupdate" rel="nofollow noreferrer">The official docs say</a> to wrap the component in <code>React.memo</code>. But this doesn't seem to work for preventing rerenders on state change. It only applies to prop changes.</p>
  
  <p>I have tried to make <code>React.memo</code> work. You can see a version of the code with both Outer and Inner being functional components <a href="https://codesandbox.io/s/agitated-albattani-sk30l" rel="nofollow noreferrer">here</a>.</p>
  
  <p><strong>Related questions:</strong></p>
  
  <p><a href="https://stackoverflow.com/questions/56297351/how-to-use-shouldcomponentupdate-with-react-hooks?rq=1">How to use shouldComponentUpdate with React Hooks?</a> : This question only deals with prop changes. The accepted answer advises to use <code>React.memo</code></p>
  
  <p><a href="https://stackoverflow.com/questions/40909902/shouldcomponentupdate-in-function-components">shouldComponentUpdate in function components</a> : This question predates stateful functional components. The accepted answer explains how functional components don't need <code>shouldComponentUpdate</code> since they are stateless.</p>