title: React hooks with switch-case render
body: <p>I have a component renders other ones by switch-case</p>
  <pre><code>export default function Fragment(props) {
      switch (props.type) {
          
          case FRAGMENT_TYPES.Start:
              return StartFragment(props);
  
          case FRAGMENT_TYPES.Rules:
              return RulesFragment(props);
  
          // some other cases
          
          default:    
              return null;
      } 
  }
  </code></pre>
  <p>But I get 'order of Hooks error' if <code>StartFragment</code> uses hooks but <code>RulesFragment</code> doesn't.</p>
  <p>How can I avoid this error? Should I raise all hooks up in <code>Fragment</code> or there is another method?</p>