React Hooks With Switch-case Render

I have a component renders other ones by switch-case export default function Fragment(props) { switch (props.type) { case FRAGMENT_TYPES.Start: ret

Solution 1:

I guess you call the function directly

Fragment(props)

instead of the component

<Fragment {...props}/>

Fragment also calls StartFragment and RulesFragment directly. So StartFragment and RulesFragment are then executed in the calling components context. Thus if StartFragment has a hook but RulesFragment don't, it's just like using hooks in conditionals. E.g.

constApp = (props) => {
  const fragment = Fragment(props)
  ....
}

App calls function Fragment calls function StartFragment.

But when you use a component

constApp = (props) => {
  const fragment = <Fragment {...props}/>
  ....
}

The App doesn't call the function Fragment directly. It calls a React component that has an own state management and this component calls the function Fragment. You can see it when you look at the transpiled code. It should look something like this:

React.createElement(Fragment, props, null);

That's why <Fragment {...props}> works but Fragment(props) don't.

If this is the case I would recommend to change the Fragment function to:

functionFragment(props) {
  switch (props.type) {
    case"Start":
      return<StartFragment {...props}/>;

    case"Rules":
      return<RulesFragment {...props}/>;

    // some other casesdefault:
      return<></>;
  }
}