title: Passing React-Redux useSelector Hook as Props
body: <p>Precursor: I'm fairly new to Redux, but I know enough about coding that I know the following solution is not ideal. Although it works, I'm really iffy about using eval() and passing a hook as a string. I'm looking to see if there is a better way to do this or if React-Redux has a built in functionality for what I'm trying to achieve.</p>
  <p>Scenario: All of my ChildComponents in the code below are generic components (dropdowns, etc.) that should not include code baked in them linking them to specific items; I'm trying to keep them as generic as possible. However, when checkBox1 triggers a dispatch to change Item1 in the store, I only want the intended Dropdown (dropdown2) to rerender and not the whole ParentComponent (and by extension all of the children). I also want dropdown2 to update it's options each time Item1 is changed in the store. The only way I can think to do this without foring a rerender of the entire ParentComponent is to deploy the useSelector hook in the child. I don't want to explicitly declare the hook in the child though because that violates abstraction and forces me to put workaround code in the generic Dropdown component.</p>
  <p>Side Note: I've considered some how declaring useSelector in the Parent and preventing it from forcing a rerender, but the props would still have to change on dropdown2 which would still force a rerender of the Parent to reflect dropdown2's new props.</p>
  <pre><code>const ParentComponent = () =&gt; {
  
    let passSelector = &quot;selector(state =&gt; state.Item1 ? state.Item2.concat(state.Item3) : state.Item2)&quot;;
  
    let dropdown1 = &lt;Dropdown input={[thing1, thing2]} /&gt;;
    let dropdown2 = &lt;Dropdown input={passSelector} /&gt;
    let checkbox1 = &lt;Checkbox onClick={() =&gt; dispatch(toggleItem1)} /&gt;;
  
    let menu1 = [dropdown1];
    let menu2 = [dropdown2, checkbox1];
  
    return (
      &lt;div&gt;
        &lt;Checkbox1 onClick={doThing} /&gt;
        &lt;Switch onSwitch={switchyThing} /&gt;
        {mode &amp;&amp;
           menu1
        }
        {!mode &amp;&amp;
           menu2
        }
      &lt;div/&gt;
    );
  }
  
  const Dropdown = ({input}) =&gt; {
    const selector = useSelector; // Grabbed from the import statements to force importation.
    const options = (typeof input === 'string') ? eval(input) : input;
  
    ... some other code ...
  
    return (
      {options &amp;&amp; options.map(option =&gt; {
        ...do thing with option...
      }
    );
  }   
  </code></pre>