title: Use ref inside React.memo
body: <p><code>React.memo</code> can be used to control whether a React function component should update or not. It compares by props by default. Now I want to compare a prop with one of the ref inside the function component. To be more specific, here is the code(Written in Typescript):</p>
  <pre class="lang-js prettyprint-override"><code>interface RichEditorProps {
      value: string;
      onChange: (value: string) =&gt; void;
  }
  
  export const RichEditor = React.memo((props: RichEditorProps) =&gt; {
  
      const contentEditableDiv = useRef&lt;HTMLDivElement&gt;(null);
  
      useEffect(() =&gt; {
          contentEditableDiv.current!.addEventListener(&quot;input&quot;, () =&gt; {
              props.onChange(contentEditableDiv.current!.innerHTML);
          });
      });
  
      return (
          &lt;div contentEditable suppressContentEditableWarning ref={contentEditableDiv}&gt;
              {props.value}
          &lt;/div&gt;
      )
  }, ((prevProps, nextProps) =&gt; {
      // I want to do this, but it doesn't work because contentEditableDiv is not available here.
      return nextProps.value !== contentEditableDiv.current!.innerHTML;
  }));
  </code></pre>
  <p>As you can see, I want to update the component when <code>contentEditableDiv.current!.innerHTML</code> doesn't equal to <code>nextProps.value</code>, but I cannot do it because <code>contentEditableDiv</code> is not available there. Is there any other way to achieve this without turning it into a class Component?</p>
  <p>P.S. One way to achieve this may be to give the <code>div</code> an id and use <code>document.getElementById</code> to grab the <code>div</code> component inside the compare function. But I want to avoid this approach since in this way, I have to think of a method to assign a unique id to it, I haven't found an easy way to do it. And I'm curious if there's any other way to do it.</p>