title: Would this be considered "breaking the rules of hooks"?
body: <p>I have a compound component that is used to build a bunch of different (but similar) screens in a react native app. Data comes from a CMS, and depending on the value of a prop called <code>type</code> it needs to have different state variables, different validation, etc. I've written a config object who's methods map to the values of <code>type</code>, and contain the state and functions needed for each use case. The pattern looks like this (edited for example sake):</p>
  <pre><code>import { useState } from 'react';
  
  const MyComponent = props =&gt; {
    const { type } = props; // possible values of type are 'A', 'B', 'C'
  
    const config = {
      A() {
        const [value, setValue] = useState('');
        
        function onChange({ target }) {
          setValue(target.value);
        }
        return {
          value,
          onChange
        }
      },
      B() {
        // ...
        return {
          value: '',
          onChange: () =&gt; {}
        }
      },
      C() {
        // ...
        return {
          value: '',
          onChange: () =&gt; {}
        }
      }
    }[type]();
  
    return &lt;input value={config.value} onChange={config.onChange} /&gt;
  };
  
  export default MyComponent;
  </code></pre>
  <p>BUT!</p>
  <p>In the react <a href="https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level" rel="nofollow noreferrer">docs</a> it says this:</p>
  <blockquote>
  <p>Don’t call Hooks inside loops, conditions, or nested functions.</p>
  </blockquote>
  <p>My question is - does the above example violate the rules of hooks? It seems to work for what I need it to, but I suspect that it may cause problems. Would appreciate any thoughts / discussion. Cheers!</p>