title: How Exactly useselector works?
body: <p>As per Doc</p>
  <pre><code>useSelector(selector: Function, equalityFn?: Function)
  </code></pre>
  <p>useSelector accepts two params and second one is optional since by default it compare strict === reference equality check but  not shallow equality.</p>
  <pre><code>  const state = useSelector(state =&gt; {
          console.log(&quot;useSelector rerendering&quot;);
          return state.counter
      }, shallowEqual)
  </code></pre>
  <p>Another is</p>
  <pre><code>  const state = useSelector(state =&gt; {
          console.log(&quot;useSelector rerendering&quot;);
          return state.counter
      })
  </code></pre>
  <p>In both Cases component rerendering when redux store state changes and also when local state changes then it will render (print console.log inside useSelector)</p>
  <p>I really didn't understand exactly how it works</p>
  <p>Full source code</p>
  <pre><code>import React, { useState } from 'react'
  import { shallowEqual, useDispatch, useSelector } from 'react-redux'
  import { decrement, increment } from './store/actions'
  
  
  export default function CounterHooks(props) {
  
      const [submit, setSubmit] = useState(false)
      const state = useSelector(state =&gt; {
          console.log(&quot;useSelector rerendering&quot;);
          return state.counter
      }, shallowEqual)
  
  
      const dispatch = useDispatch()
   
      console.log(&quot;component rerendering&quot;);
      const increments = () =&gt; {
  
          dispatch(increment());
  
      }
  
      const decrements = () =&gt; {
  
          dispatch(decrement());
      }
      const submitButton = () =&gt; {
          console.log(&quot;component submit&quot;, submit);
  
          setSubmit((previousState) =&gt; !previousState)
  
      }
      return (
          &lt;div&gt;
              &lt;button onClick={increments} &gt;Incrmeent Counter&lt;/button&gt;
              &lt;br /&gt;
              &lt;button onClick={decrements} &gt;Decrement Counter&lt;/button&gt;
              &lt;br /&gt;
              &lt;button onClick={submitButton} &gt;Submit&lt;/button&gt;
              &lt;br /&gt;
  
              &lt;h2&gt;total : {state.count}&lt;/h2&gt; &lt;br /&gt;
              &lt;h2&gt;Submit:{String(submit)}&lt;/h2&gt; &lt;br /&gt;
             
             
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>MY question is how exactly second param works ?</p>