# Modern Forms in React - Erik Rasmussen
###### tags: `jsdc2019`

{%hackmd @JSDC-tw/2019-announcement %}

### Controlled vs uncontrolled components

- Uncontrolled: allow DOM to manage state

[react-final-form](https://github.com/final-form/react-final-form)

[final-form](https://github.com/final-form/final-form)

✅ Zero dependencies

✅ Only peer dependencies: React and
[🏁 Final Form](https://github.com/final-form/final-form#-final-form)

✅ Opt-in subscriptions - only update on the state you need!

✅ 💥 [**3.0k gzipped**](https://bundlephobia.com/result?p=react-final-form) 💥

<Form />
<Field />
<FormSpy />

useField()

useFormState()

useForm()

### 特色：

- Demo：renderCount on every inout element
- controll how to rerender when state changed
(like GraphQL，specifiy what part of state we care about)
subscription

Architecture
===

React Final Form is a thin React wrapper for Final Form, which is a subscriptions-based form state management library that uses the Observer pattern, so only the components that need updating are re-rendered as the form's state changes.

By default, **React Final Form subscribes to _all_ changes**, but if you want to fine tune your form to optimized blazing-fast perfection, you may specify only the form state that you care about for rendering your gorgeous UI. You can think of it a little like GraphQL's feature of only fetching the data your component needs to render, and nothing else.

How and when to choose a library
---

- Complexity of the problem
- Extensibility
- Examples
- Docs
- Bundle size
- ~~Github Stars and NPM downloads~~
- Dose it make sense to you?