Cluttered imported React hook names

Here are the examples of React hook calls currently (Feliz v2.4.1, but I remember the case take place all my Feliz usage): useReact_useCallback_1CA17B65, useReact_useMemo_10C6A43C and so on. Firstly, That doesn't look pretty. And in practice it affects React Dev Tools user experience. Secondly, there is actual JS-code being produced in Feliz bundle, e.g. from fable_modules/Feliz.2.4.1/React.fs.js:

export function useReact_useMemo_10C6A43C(createFunction, dependencies) {
    const arg_1 = defaultArg(dependencies, []);
    return Interop_reactApi.useMemo(createFunction, arg_1);
}
// and so on for the rest of the bindings

As I understand, this would not have happened if the containing React type had Erase attribute (to be erased by Fable). However it will work only when all of the type members are inline. And now I see that alongside the inline "pure" imports React type contains:

non-inline members that in fact could be made inline because of being "pure" imports);
non-inline members and even custom hooks with the actual logic (createDisposable, useEffectOnce, useCallbackRef, useCancellationToken) that couldn't be simply marked inline while being defined directly in the React type as they're now. However I see the solution in moving all these custom hooks to a separate module/non-erased type and then calling them from the inline members of React type -- so that there should be no critical changes from the F# API perspective. P.S. Also Hook attribute should be removed from all these hook-members when the React type is erased.

The solution doesn't seems to require a lot of work, if it is actually correct -- haven't tried anything yet, just made assumptions based on my previous experience. Decided to ask for other opinions and expertise here before doing something 🙂

Zaid-Ajaj / Feliz

Cluttered imported React hook names #564