Formite - the new and easy Form package for React - was released.

#History

React requires a lot of plumbing to implement even a simple form. Each form control requires value, onBlur and onChange properties. To reduce the amount of code the React documentation recommends sharing event handlers by relying on id or name properties of the elements. However, this introduces magic strings and makes it difficult to refactor the code.

To validate the fields and the entire form you have to write even more code.

So we needed a different solution.

#React Hooks to the rescue

React Hooks make it possible to attach behavior to your components without using High-Order-Components (HOCs) or render props.

Maybe you remember the beginning of React when there were no classes and you could change the behavior of your components using mixins?

Here is how React ended up with Hooks:

createClass() (Mixins) -> JS6 classes (HOCs and render props) -> Functional Components (Hooks)

createClass() was easy to extend but was a workaround for not being able to use real classes. JS6, Typescript and Babel changed that and we could use real classes. Unfortunately, classes were difficult to extend and the workaround were HOCs and render props. Later React introduced Functional Components that had the disadvantage of not being able to participate in the component lifecycle and they needed the same workarounds to be exended.

React Hooks solve the limitations of Functional Components and make them even more versatile than class components.

#Formite features

The objectives for developing Formite were:

• Use React Hooks
• Implement a backward compatible layer to make it compatible with class components
• Full synchronous and asynchronous support
• Performant
• Easy to refactor - no magic strings
• No dependencies on any external packages
• Small footprint