title: How to know if props have changed when using React.memo() with a functional Component
body: <p>I need to make an equivalent for the obsolete <strong>shouldComponentUpdate</strong> react lifecycle method with react hooks.</p>
  <p>I have a <strong>Functional Components</strong> as it's called in <a href="https://scotch.io/tutorials/react-166-reactmemo-for-functional-components-rendering-control" rel="nofollow noreferrer">this article</a> which uses <strong>React.memo()</strong> to do it.</p>
  <p>I just couldn't understand how to prevent the re-rendring of the component if only <strong>props</strong> is returned as a unique argument.</p>
  <p>In others <strong>React.memo()</strong> examples (<a href="https://stackoverflow.com/a/64608588/1705922">as in here</a>) there is also a <strong>nextProps</strong> which is returned besides <strong>props</strong> and which is useful to compare with props to decide wether to let re-render the component or not.</p>
  <p>Even when i add a second argument to be returned by the component , i always got just an empty plain js object.</p>
  <p>Such as <strong>Functional Components</strong> aren't they always stateless so they won't keep any of the component's variables's values even those instanciated with the React.useState() ? So how we are supposed to know if props have changed ?!</p>
  <p>this is the component:</p>
  <pre><code>import React, { useEffect, useRef, useState, memo } from &quot;react&quot;;
  
  const TinyEditor = (props, nextProps) =&gt; {
     return 'some jsx'
  };
  
  const MemoizedTinyEditor = memo(
    TinyEditor,
    (props, nextProps) =&gt; {
      // if(props.prop1 === nextProps.prop1) {
      //   // return true if you don't need re-render
      // }
      console.log(&quot;TinyEditor :: MEMO!!!!!!!!!!&quot;);
      return true;
    }
  );
  export default MemoizedTinyEditor;
  </code></pre>