Cannot use hooks because of how containers call their views

The following:

const MyResultView = () => {
  const someHook = useHook();

  return <div>My Result</div>;
};

<Result view={MyResultView} />

Errors with: https://reactjs.org/warnings/invalid-hook-call-warning.html

I think this is because of how containers call their views:

https://github.com/elastic/search-ui/blob/c68f78f9f44680f8219c8aa1e2ed5442c56936af/packages/react-search-ui/src/containers/Result.js#L43-L50

When I change that to:

    return <View
      className={className},
      result={result}
      key={`result-${result.id.raw}`}
      onClickLink={() => this.handleClickLink(result.id.raw)}
      titleField={titleField}
      urlField={urlField}
    />;

Everything works fine.

[artemis-prime]

Jason, re “I’m hesitant to make the switch from View() to <View /> because I don’t fully understand the functional differences between the two styles.” … the difference is that one is seriously non-idiomatic to React and bypasses React’s internals completely. If you simply call a function you never trigger the tracking that allows React to register and call hooks properly. What’s worse, in certain cases that may not trigger an error, you may actually end up registering the hooks on the wrong component! Bottom line: a function only becomes a component to the React core when you actually render it --as is evidenced by the workaround above, so render it!

https://kentcdodds.com/blog/dont-call-a-react-function-component

Please fix this. It wouldn’t be a minor issue for any React framework

(Elastic is great. Keep up the good work)

[FokkeZB]

For others who run into this, you can workaround via:

const MyResultView = () => {
  const someHook = useHook();

  return <div>My Result</div>;
};

const MyPatchedResultView = (props) => (
  <MyResultView {...props} />
);

<Result view={MyPatchedResultView} />