title: How to change useState's state without re-rendering the component, but just its components
body: <p>How do I change the useState without re-rendering it but just its components? Why I need is because I have some logic that changes the useState in Comp1. If I would re-render Comp1 I would have to recalculate its value. But if the change happens I still would like to re-render its components.  </p>
  
  <p>Edit: bigger code snippet. </p>
  
  <pre><code>function Comp1() {
    const [user, setUser] = useState({});
  
    firebase.auth().onAuthStateChanged(function (_user) {
      if (_user) {
        // User is signed in.
        setUser(_user);
      } else {
        setUser({ exists: false });
      }
    });
  
    return (
      &lt;div&gt;
        &lt;UserProvider.Provider value={{user, setUser}}&gt;
          &lt;Comp2 /&gt;
          &lt;Comp3 /&gt;
        &lt;/UserProvider.Provider&gt;
  
      &lt;/div&gt;
    );
  }
  
  function Comp2(props) {
    const { user, setUser } = useContext(UserProvider);
    return (
      &lt;div&gt;
        {user.exists}
      &lt;/div&gt;
    )
  }
  
  function Comp3(props) {
    const { user, setUser } = useContext(UserProvider);
    return (
      &lt;div&gt;
        {user.exists}
      &lt;/div&gt;
    )
  }
  
  //User Provider
  
  import React from 'react';
  
  const UserProvider = React.createContext();
  export default UserProvider;
  </code></pre>