<p dir="auto">React version: 17.0.2</p>
<h2 dir="auto">Steps To Reproduce</h2>
<ol dir="auto">
<li>Have a component which memoizes the result of a renderToStaticMarkup.</li>
<li>Use renderToStaticMarkup to render the component of 1.</li>
</ol>
<p dir="auto">Link to code example:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="function nestedRender() {
  return renderToStaticMarkup(&lt;p&gt;This is the nested render result&lt;/p&gt;);
}

function MyComponent() {
  const nestedRenderResult = useMemo(() =&gt; nestedRender(), []); // Removing useMemo will solve the issue
  return &lt;p&gt;The nested result is: {nestedRenderResult}&lt;/p&gt;;
}

function wrapperRender() {
  return renderToStaticMarkup(&lt;MyComponent /&gt;);
}"><pre class="notranslate"><code class="notranslate">function nestedRender() {
  return renderToStaticMarkup(&lt;p&gt;This is the nested render result&lt;/p&gt;);
}

function MyComponent() {
  const nestedRenderResult = useMemo(() =&gt; nestedRender(), []); // Removing useMemo will solve the issue
  return &lt;p&gt;The nested result is: {nestedRenderResult}&lt;/p&gt;;
}

function wrapperRender() {
  return renderToStaticMarkup(&lt;MyComponent /&gt;);
}
</code></pre></div>
<p dir="auto"><a href="https://codesandbox.io/s/lingering-shadow-vyqyd" rel="nofollow">https://codesandbox.io/s/lingering-shadow-vyqyd</a></p>
<h2 dir="auto">The current behavior</h2>
<p dir="auto">The application crashes with a TypeError: Cannot set property 'memoizedState' of null</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Uncaught TypeError: Cannot set property 'memoizedState' of null
    at Object.useMemo (react-dom-server.browser.development.js:1587)
    at useMemo (react.development.js:1532)
    at MyComponent (App.tsx? [sm]:12)"><pre class="notranslate"><code class="notranslate">Uncaught TypeError: Cannot set property 'memoizedState' of null
    at Object.useMemo (react-dom-server.browser.development.js:1587)
    at useMemo (react.development.js:1532)
    at MyComponent (App.tsx? [sm]:12)
</code></pre></div>
<h2 dir="auto">The expected behavior</h2>
<p dir="auto">The result is rendered correctly to a string containing the final markup.</p>
<h2 dir="auto">Context about my use case</h2>
<p dir="auto">The example may seem a bit contrived as nesting renderToStaticMarkups is by no means a common case. However, we use the outer renderToStaticMarkup to do server side rendering of HTML output. The inner renderToStaticMarkup is used to render the content to a string on which we do extra postprocessing after (e.g. Handlebars).</p>
<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong></p>
<p dir="auto">A bug?</p>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<blockquote>
<p dir="auto">Cannot set property 'memoizedState' of null</p>
</blockquote>
<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>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const processLink = html =&gt; {
  return renderToStaticMarkup(&lt;Link /&gt;)
};

const RichText = ({ html }) =&gt; {
  const htmlProcessed = useMemo(() =&gt; processLink(html), [html]);
}"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-en">processLink</span> <span class="pl-c1">=</span> <span class="pl-s1">html</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">return</span> <span class="pl-en">renderToStaticMarkup</span><span class="pl-kos">(</span><span class="pl-c1">&lt;</span><span class="pl-ent">Link</span> <span class="pl-c1">/</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-k">const</span> <span class="pl-v">RichText</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">{</span> html <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">const</span> <span class="pl-s1">htmlProcessed</span> <span class="pl-c1">=</span> <span class="pl-en">useMemo</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-en">processLink</span><span class="pl-kos">(</span><span class="pl-s1">html</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-kos">[</span><span class="pl-s1">html</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">See <a href="https://codesandbox.io/s/cannot-set-property-memoizedstate-of-null-mrxfr" rel="nofollow">https://codesandbox.io/s/cannot-set-property-memoizedstate-of-null-mrxfr</a></p>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto"><strong>Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?</strong></p>
<p dir="auto">16.8~16.9</p>