title: Should I use separate useState for each property
body: <p>I have written following code:</p>
  <pre><code>function CreateModal({toggleCreatePorjectModal, fetchProjects}) {
      const [formObj, setFormObj] = useState({name: &quot;&quot;, link: &quot;&quot;, error: &quot;&quot;})
  
  
      function validateLinkAndCreateProject() {
          if(formObj.link.trim() === &quot;&quot; || formObj.name.trim() === &quot;&quot;) {
              setFormObj(state =&gt; ({...state, error: &quot;ALL fields are mandatory, please enter Project Name and Feed Link to create project.&quot;}))
              return
          }
          
          rssFeedParser(formObj.link.trim())
              .then((res) =&gt; {
                  axios.post(`${ServerPath}/projects/create`, {
                      name: formObj.name, 
                      link: formObj.link
                  })
                  .then(response =&gt; {
                      if(response.data.error) {
                          setFormObj(state =&gt; ({...state, error: &quot;Something went wrong. Please try again after some time.&quot;}))
                      } else {
                          fetchProjects()
                          toggleCreatePorjectModal(false)
                      }  
                  })
                  .catch((err) =&gt; {
                      setFormObj(state =&gt; ({...state, error: err.msg}))
                  })
              })
              .catch((err) =&gt; {
                  setFormObj(state =&gt; ({...state, error: err.msg})) 
              })
      }
      return  (
          &lt;div &gt;
              {/*Will Render Something based on above code*/}
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>I have used only one useState to store properties like &quot;name&quot;, &quot;link&quot;, &quot;error&quot; in one object. As I wanted to keep logic of FormObj and validateLinkAndCreateProject together. All three properties use only one useEffect. Hence, I thought that it is better to keep all three properties inside useState instead of creating 3 different usestate.</p>
  <p>But my manager, and my technical architect telling me to create 3 useState, one useState for each property,that is, separate useState for name, link and error. According to them, never create object inside useState like useState({name: &quot;&quot;, link: &quot;&quot;, error: &quot;&quot;}). I should always create separate useState for each property.</p>
  <p>As per my understanding, in older react we used to have only one state which use to have 30 to 40 properties in one object. With introduction of React hooks, as per &quot;separation of concern&quot;, we are suppose to separate related logic from rest of the code. Hence, we will end up 5 to 6 states having objects with 4 to 5 properties.</p>
  <p>Note: Here &quot;separation of concerns&quot; means breaking class code in such way that dependent state + useEffect + useRef etc kept together. below is quote from React documentation.</p>
  <blockquote>
  <p>Hooks let you split one component into smaller functions based on what
  pieces are related (such as setting up a subscription or fetching
  data), rather than forcing a split based on lifecycle methods.</p>
  </blockquote>
  <p>I wanted to Am I missing anything??, Is it okay to create useState({name: &quot;&quot;, link: &quot;&quot;, error: &quot;&quot;}). or
  should I create separate state for each one of them?</p>