title: React - is the following true about how html tags' attribute values change when a component is reexecuted?
body: <p>Can I verify my observation (based on the code below)?:</p>
  <ol>
  <li><p>Class values of an element added in the html markup of a component don't neccessarily 'persist' - when the component is re-executed (perhaps as the result of a change in state), the class value from the last execution can disappear.</p>
  </li>
  <li><p>However, class values written via vanilla JS persist.</p>
  </li>
  <li><p>I'm always looking for best practices in code to avoid problems down the line. Is this code a reasonable way to add a class to a tag in React?</p>
  </li>
  </ol>
  <p><strong>sandbox:</strong> <a href="https://codesandbox.io/s/purple-moon-epmmu?file=/src/styles.css:59-126" rel="nofollow noreferrer">https://codesandbox.io/s/purple-moon-epmmu?file=/src/styles.css:59-126</a></p>
  <pre><code>import &quot;./styles.css&quot;;
  import React, { useState, useEffect } from &quot;react&quot;;
  
  export default function App() {
    let [color, setColor] = useState(false);
  
    function updateColor() {
      if (color) {
        setColor(&quot;&quot;);
      } else {
        setColor(&quot;red&quot;);
      }
    }
  
    useEffect(() =&gt; {
      document.querySelector(`div`).classList.add(`green-text`);
    }, []);
  
    return (
      &lt;&gt;
        &lt;div className={color ? &quot;red&quot; : null} onClick={updateColor}&gt;
          Click to add/remove red class
        &lt;/div&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  <pre><code>.red {
    background-color: red;
  }
  
  .green-text {
    color: green;
  }
  </code></pre>