title: Where is information stored on the client that React hides with conditional rendering?
body: <p>I'm trying to determine how secure it is to hide information with conditional rendering in React.</p>
  <p>In the following React code, I hide the information &quot;nnn&quot; if the user is not logged in.</p>
  <pre><code>import './App.scss';
  const loggedIn = false;
  
  function App() {
      return (
          &lt;div className=&quot;App&quot;&gt;
              &lt;h1&gt;Website&lt;/h1&gt;
              &lt;hr /&gt;
              {loggedIn &amp;&amp; (
                  &lt;div&gt;nnn&lt;/div&gt;
              )}
              &lt;hr /&gt;
          &lt;/div&gt;
      );
  }
  
  export default App;
  </code></pre>
  <p>When I look at the HTML (with CTRL-U) which the browser originally received, of course the data is not there:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
    &lt;head&gt;
      &lt;meta charset=&quot;utf-8&quot; /&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
      &lt;title&gt;website&lt;/title&gt;
    &lt;script defer src=&quot;/static/js/bundle.js&quot;&gt;&lt;/script&gt;&lt;/head&gt;
    &lt;body&gt;
      &lt;div id=&quot;root&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>But even when I inspect the page to see what data is actually contained in the current DOM, the data is also not present:</p>
  <p><a href="https://i.stack.imgur.com/Tu7bo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tu7bo.png" alt="enter image description here" /></a></p>
  <p>What would a not-logged-in hacker have to do in order to find the text &quot;nnn&quot;? Where is this text being saved on the client while it is being hidden by conditional rendering?</p>