title: React Hooks - Should I use 'useState' for state that is unchanging?
body: <p>When I initially learned React Component's I was always told to put <strong>everything</strong> in <code>this.state</code>. Whether it be some pieces of data that update frequently or some that never update at all.</p>
  
  <p>However, with the implementation of React hooks, I'm not sure how frequently I should use <code>useState</code> even when the state will not update.</p>
  
  <p>Let me give you an example of some of my form logic:</p>
  
  <pre><code>const FormAuth = props =&gt; {
      //Frequently updates
      const [validInput, setValidInput] = useState({
          isCompletedForm: Boolean,
          firstName: Boolean,
          lastName: Boolean,
          email: Boolean,
          password: Boolean,
          confirmPassword: Boolean
      });
  
      // Never updates
      const [formSchema, setFormSchema] = useState({
          firstName: Joi.string().required(),
          lastName: Joi.string().required(),
          email: Joi.string().required().email().regex(emailRegex),
          password: Joi.string().required().regex(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$^+=!*()@%&amp;?.]).{8,30}$/),
          confirmPassword: Joi.string().required()
      })
  
      // Never updates
      const [inputRef, setInputRef] = useState({
          firstNameRef: React.createRef(),
          lastNameRef: React.createRef(),
          emailRef: React.createRef(),
          passwordRef: React.createRef(),
          confirmPasswordRef: React.createRef()
      });
  
      // render some JSX
  }
  </code></pre>
  
  <p>Here I have 3 states. The first state are Booleans that say if the inputs look good. The second state is a formSchema which will never be updated. Lastly, the third state is the Refs for each of the inputs which will also never be updated.</p>
  
  <p><strong>My question is:</strong> Would is make more sense <strong>to only have one state</strong> for <code>validInputs</code> since it updates frequently, and then for <code>formSchema</code> and <code>inputRef</code> create a const object with vanilla javascript? Or should everything go into state like before? </p>
  
  <p>It seems to me that it would make more sense to only use <code>useState</code> if that state is going to update, but I'm trying to see what is the proper convention for hooks moving forward.</p>