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 ?
Advertisement
Answer
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.