title: Difference between redux nested selector and non-nested selector
body: <p>I have seen many example codes of redux and found that we use useSelector in mostly 2 ways.</p>
  <ol>
  <li>nested</li>
  </ol>
  <pre><code>    import React from 'react'
      import { useSelector } from 'react-redux'
      
      export const UserComponent = () =&gt; {
        const name = useSelector((state) =&gt; state.user.name)
        const age = useSelector((state) =&gt; state.user.age)
        return &lt;div&gt;{name}, {age}&lt;/div&gt;
      }
  </code></pre>
  <ol start="2">
  <li>non-nested</li>
  </ol>
  <pre><code>    import React from 'react'
      import { useSelector } from 'react-redux'
      
      export const UserComponent = () =&gt; {
        const user = useSelector((state) =&gt; state.user)
        return &lt;div&gt;{user.name}, {user.age}&lt;/div&gt;
      }
  </code></pre>
  <p>As you can see, with approach 2, I will end up saving lots of code repetition and I only need to create 1 selector.
  So I wanted to know the difference, any performance benefits, etc.</p>