React Hook is called in function that is neither a React function component nor a custom React Hook function

Question

I have this following ESLint warning :

React Hook "useBuilderFeatureFlagContext" is called in function "Slide.RenderBuilder" that is neither a React function component nor a custom React Hook function.

and this is the following component :

Slide.RenderBuilder = ({ children }) => {
  const flags = useBuilderFeatureFlagContext();

  return (
    <>
      <SlideWrapper $flags={flags}>
        {children}
      </SlideWrapper>
      <ImageSetter attributeName="containerBackgroundImage" />
    </>
  );
};

How do I write a rule that can whitelist this specific case ?

Answer 1

If you can, define the component first, then add it to your object.

const RenderBuilder = ({ children }) => {
  const flags = useBuilderFeatureFlagContext();

  return (/**/);
};

Slide.RenderBuilder = RenderBuilder;

That way, the rule properly check for hooks, and you have the structure you're looking for.

Make sure to use it as a component <Slide.RenderBuilder /> otherwise you might end up breaking rules of hooks.