React-Compiler and the focusHook prop

[sondreluc]

I am currently in the process of trying out the React-Compiler on my project, and in doing so, I've added the eslint-plugin-react-compiler ESLint plugin, making it easier to find issues that will prevent the compiler from optimizing components.

One of the rules that the plugin includes, is that you should Never pass around Hooks as regular values.
This rule is broken by the component API in this library, specifically the focusHook prop, that you have to assign for all scrollable components from this library, when working with react-navigation, in order for the scrollable components to work as expected.

In my project we use bottom sheets (modal) quite extensively, and we have over 100 components that internally use a scrollable component from this library. Breaking the rules-of-react in each of these components, means that the compile won't be able to do any optimizations on them.

So to my question, is the focusHook-prop a design flaw of the library that should be refactored/fixed by the library, or is there maybe other ways of minimize the impact this has on the compilers ability to optimize.
I have for example thought of making wrapper components for each of the scrollable components that the library exposes, where I assign the useFocusEffect hook from react-navigation, to thefocusHook inside the wrapper, so that the amount of component code that can cannot be optimized is limited to the wrapper components, and not the full consumers of the scrollables.