title: Logging messages from useLayoutEffect & useEffect to the same React component
body: <p>Just for fun, I tried to implement logging messages from my useLayoutEffect &amp; useEffect hooks in the TextArea in the same React component:</p>
  <pre><code>const UseLayoutEffectExample = () =&gt; {
  
      const [text, setText] = useState(&quot;&quot;)
  
      useLayoutEffect(() =&gt; {
          console.log(&quot;useLayoutEffect&quot;)
          setText(text =&gt; text + &quot;useLayoutEffect\n&quot;)
      });
  
      useEffect(() =&gt; {
          console.log(&quot;useEffect&quot;)
          setText(text =&gt; text + &quot;useEffect\n&quot;)
      });
  
      return (
          &lt;&gt;
              &lt;textarea
                  readOnly={true}
                  value={text}
                  cols={15}
                  rows={10}
                  style={{resize: &quot;none&quot;}}
              /&gt;
          &lt;/&gt;
      )
  }
  </code></pre>
  <p>As a result, I created an infinite loop with a couple of messages in the console like &quot;Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate&quot;.
  The reason of that behaviour is obvious. But suppose, I want to somehow print messages from &quot;lifecycle functions&quot; <strong>for each render</strong> to the <strong>textarea</strong>, not to the console, how should I implement this?</p>
  <p><strong>NOTE:</strong><br/>
  Of course I can avoid this problem by just creating an external variable, but I would like to avoid that.</p>