Any guide on how to make hooks that are performant like useForm() is?

[timkindberg]

I want to learn how to make my own performant hooks

I want to make hooks for other things unrelated to forms but I want the performance benefits that useForm has.

IMO, useForm's inner patterns related to performance and rendering-elimination within the source code are it's core feature. Looking within the source I see various patterns going on:

• Use of a returned ref from useForm
• Use of subjects and subscriptions
• Use of proxies

It would be nice to understand how one would use these patterns within their own code to achieve performant hooks that act like a "brain" for a larger component set.

E.g. we are making a List Page component at work, it's a set of components that help our teams render a page of results. Results can be filtered, searched, etc. Each main section has their own "brain" or "model" similar to useForm() how it has "control".

We have various hooks that can work together optionally: useFiltersSidebar(), useActionBar(), useBulkActionsBar(), usePagination().

Has any effort ever been made to extract the underlying pattern to an open source library?

Would it be valuable, or even possible to extract and abstract the patterns used to make useForm performant? And have those patterns be generally useful as their own package or sub-package?

Or are the patterns already at a good level of abstraction? If yes, then is there any documentation on how the ref, subjects and proxies are best used together?

The patterns are quite advanced, so not super easy to digest, especially mixed in with all the form specific logic.