title: Change a data of a class passed as parameter inside React Hooks useState()
body: <p>I would like to ask what would be the origin of using classes inside useState, I didn't see a certain &quot;Disapproval&quot; anywhere, but at the same time I don't see anyone using it, so would passing classes be plausible?</p>
  <p>In the development of my software, I determined that it would work well, at least for read-only, but the direction of the project changes and now I need me to change an attribute of a class, which is within another class - It seems that React reloads the page but it doesn't change the value of my attribute, I made a small example without typescript for didactic purposes:</p>
  <pre><code>import React from &quot;react&quot;;
  
  class Foo {
    constructor(fooText, bar) {
      this.fooText = fooText;
      this.bar = bar;
    }
    fooText;
    bar;
  }
  
  class Bar {
    constructor(data) {
      this.data = data;
    }
    data;
  }
  
  export default function App() {
    const [foo, setFoo] = React.useState(
      new Foo(&quot;Foo text!&quot;, new Bar(&quot;Look this data!&quot;))
    );
  
    async function changeFoo() {
      //await TODO Change data on database
      console.log(&quot;Refreshing!&quot;);
      foo.bar.data = &quot;Now bar have another data!!&quot;;
      foo.fooText = &quot;Updated foo text!&quot;;
      console.log(foo);
      //PROBABLY THE PROBLEM IS HERE, 
      setFoo(foo);
    }
  
    console.log(&quot;Page re-rendering!&quot;);
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;h1&gt;{foo.fooText}&lt;/h1&gt;
        &lt;h1 onClick={changeFoo}&gt;{foo.bar.data}&lt;/h1&gt;;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>changing the entire class architecture to an object and using it in useState would be very difficult, I would like to avoid this solution, but I think about doing it - if I have no other option</p>