title: Multiple React effect hooks for the same dependency
body: <p>Let's say I have an effect hook with a <code>Person</code> dependency that follows the schema <code>Person: {name: string, age: number}</code>. My effect hook for this <code>Person</code> dependency currently looks like this:</p>
  
  <pre><code>useEffect(() =&gt; {
    if (person.name === 'Mike') {
      doSomething()
    }
  
    if (person.age &gt; 21) {
      somethingElse()
    }
  }, [person])
  </code></pre>
  
  <p>Would it be valid code to separate this logic into their own effect hooks with the same dependencies:</p>
  
  <pre><code>// effect that handles any logic for a person's name
  useEffect(() =&gt; {
    if (person.name === 'Mike') {
      doSomething()
    }
  }, [person])
  
  // effect that handles any logic for a person's age
  useEffect(() =&gt; {
    if (person.age &gt; 21) {
      somethingElse()
    }
  }, [person])
  </code></pre>
  
  <p>I'm trying to separate unrelated code from each other in some of my components, and I'm wondering if this would be considered an anti-pattern or if it could result in unwanted issues?</p>