This post will be a work in progress, but for now I want to start with two great packages.
The first is react-hook-form, this is one of the best packages I have used in recent years, out of the box it provides some great hooks and also a global context which allows your form components to remain decoupled. It also has great support for TypeScript, you can use generics to enforce strong typing when getting/ setting form data. There are great docs here. One of the best things about this form lib is their attention to performance and willingness to adopt HTML standards, instead of reinventing the wheel.
The second package I want to recommend is usehooks-ts. There are so many great things we can do with hooks now that greatly help with abstraction and separation of concerns. I always recommend having a play yourself in your free time, if you think of an idea for a hook, go and code it, test it, and be proud of it, but in your job if you realise this hook already exists in a great package like usehooks-ts, then I recommend using theirs instead. Why not benefit from all the testing and collaboration that comes with this package? One thing I love about this package is the heavy TypeScript support, when you dig into the source you can see that they have fully leveraged generics and utility types to provide major versatility. I was especially impressed with their implementation of useSessionStorage. They have made use of the useEventListener hook, and when they set an item in storage they invoke:
|
1 |
window.dispatchEvent(new Event('session-storage')) |
which means, even though this hook does not use context, all other mounted components subscribed to a separate instance of useSessionStorage will be updated when storage is changed elsewhere.