Forms are inevitable. Forms are hard. Forms with React sometimes even harder. In this talk, we’ll start by exploring best practices to efficiently work with react/redux forms and proceed with building a custom abstraction layer for easier form management.

1. REACT FORMS
... a crime scene ...
CRIME SCENE - DO NOT CROSS

2. mehiel@DOM
React, since 2015
Logicea, since 2013
CanJS, since 2011
ExtJS, since 2010
jQuery, since 2008
Web, since 2004

3. Forms: why bother?
Inevitable
Still a Pain
Business Interest
Fun?

4. Forms: pwn factor
|-------------------------------------------∞
^ ^ ^ ^
html react TODAY pwned

5. Forms: watch for
the Designer
the User
the API
the Browser

6. Forms: ingredients
Flexible Layout
Variety of Inputs
Dynamic Fields
Dynamic Values
Field Dependencies
Lookup Data
Validation
Hints & Errors
Field Status
Requests & Responses

7. React: the weapon
Declarative
Painless interactive UIs.
Design views for each state in your app
Predictable and easier to debug
Component Based
Encapsulated with own state
Composable to make complex UIs
Keep state out of the DOM

8. // the simplest react component as of React 16
function WorldGreeter() {
return "Hello, World"
}
<WorldGreeter /> => "Hello, World"
// with some JSX sauce
function FriendGreeter({ name }) {
return <div>Hello {name}!</div>
}
<FriendGreeter name="Bob" /> => "Hello Bob!"

9. class NobleGreeter extends React.Component {
// componentLifecycleFunctions()
// this.setState()
render() {
return (
<div>
Hello {this.props.title} {this.props.name}
</div>
)
}
}
<NobleGreeter title="sir" name="William" /> => "Hello sir William"

10. REACT FORMS
a crime in 3 acts

11. ACT 1
the victim

12. Act 1 : Scene 1 : ■
function ProfileForm1() {
return (
<form>
<input type="text" name="username" />
<input type="text" name="email" />
<input type="password" name="password" />
</form>
)
}

13. Act 1 : Scene 1 : ▸

14. Act 1 : Scene 2 : ■
<div>
<label htmlFor="username">Username</label>
<input type="text" name="username" id="username" />
</div>
<div>
<label htmlFor="email">E-mail</label>
<input type="text" name="email" id="email" />
</div>
<div>
<label htmlFor="password">Password</label>
<input type="password" name="password" id="password" />
</div>

15. Act 1 : Scene 2 : ▸
Username
E-mail
Password

16. Act 1 : Scene 3 : ■
export class ProfileForm3 extends Component {
onSubmit = (ev) => {
ev.preventDefault() // disable browser post
const data = { ... }
fetch('/api/me', { method: 'POST', body: ... })
}
inputs = {}
render() {
return (<form onSubmit={this.onSubmit}> ... </form>)
}
}

17. Act 1 : Scene 3 : ■
inputs = {}
onSubmit = (ev) => {...
const data = {
username: this.inputs.username.value,
}
}
<form onSubmit={this.onSubmit}>...
<input type="text" name="username" id="username"
ref={(el) => this.inputs.username = el} />
</form>

18. Act 1 : Scene 3 : ▸
Username
E-mail
Password
Submit

19. Act 1 : Scene 4 : ■
export class ProfileForm4 extends Component {
onSubmit = (ev) => {...
const data = {}
new FormData(ev.target).forEach(
(value, name) => data[name] = value
)
...}
render() {
...
<input type="text" name="username" id="username" />
}
}

20. Act 1 : Scene 4 : ▸
Username
E-mail
Password
Submit

21. Break : Controlled Input : ⚛
With controlled components react state is the “single source of truth”.
<input type="text" value="GreeceJS" />
GreeceJS
<input type="text" value={name} onChange={handleNameChange} />

22. Break : Controlled Input : ⚛
feature uncontrolled controlled
on submit value retrieval ✅ ✅
validating on submit ✅ ✅
instant eld validation ❌ ✅
conditionally disabling inputs ❌ ✅
enforcing input format ❌ ✅
dynamic inputs ❌ ✅

23. Act 1 : Scene 5 : ■
export class ProfileForm5 extends Component {
state = {}
onUsernameChange = (ev) => {
const value = ev.target.value
this.setState(prevState =>
({ ...prevState, username: value })) // async
}
onEmailChange = (ev) => { ... }
onPasswordChange = (ev) => { ... }
onSubmit = (ev) => {
const data = this.state
post('/api/me', data)
}
render() { ... }
}

24. Act 1 : Scene 5 : ■
render() {
const { username = '', email = '', password = '' } = this.state
// undefined values will mark inputs as uncontrolled
// -> unintented use -> maybe bugs -> react warns
return (
<form onSubmit={this.onSubmit}>
<div>
<label htmlFor="username">Username</label>
<input type="text" name="username" id="username"
value={username} onChange={this.onUsernameChange} />
</div>
...
}

25. Act 1 : Scene 5 : ▸
Username
E-mail
Password
Submit

26. Act 1 : Scene 6 : ■
export class ProfileForm6 extends Component {
state = { username: '', email: '', password: '' }
onSubmit = (ev) => {...}
onChange = (ev) => {
const { name, value } = ev.target
this.setState(prevState => ({ ...prevState, [name]: value }))
}
render() {
const { username, email, password } = this.state
...
<input type="text" name="username" id="username"
value={username} onChange={this.onChange} />
}
}

27. Act 1 : Scene 6 : ▸
Username
E-mail
Password
Submit

28. ACT 2
set the stage

29. Break : Container Components : ⚛
You’ll nd your components much easier to reuse and reason about if you divide
them into two categories.
I call them Container and Presentational components
- Dan Abramov

30. Break : Container Components : ⚛
Concerned with how things work
Provide the data and behavior
Call ux actions and provide callbacks
Often stateful, as they tend to serve as data sources
Usually generated using higher order components

31. Act 2 : Scene 1 : ■
export const ProfileContainer = Child => {
class Container extends React.Component {
state = { values: {}, errors: {} };
onSubmit = ev => post('/api/me', this.state.values)
onChange = (values, errors) => {
this.setState(prevState => ({ ...prevState, values, errors }));
};
render() {
const { children, ...childProps } = this.props;
const { values, errors } = this.state;
const { onChange, onSubmit } = this;
return (
<Child {...childProps}
form={{values, errors, onChange, onSubmit}}>
{children}</Child>
)}}
return Container;
}}

32. Act 2 : Scene 1 : ■
class _ProfileForm7 extends Component {
onChange = (ev) => {
const { values, onChange } = this.props.form
const { name, value } = ev.target
const newValues = { ...values, [name]: value }
onChange(newValues)
}
render() {
const { values, onSubmit } = this.props.form
return <form onSubmit={onSubmit}>...
<input type="text" name="username" id="username"
value={values.username || ''} onChange={this.onChange} />
}}
const ProfileForm7 = ProfileContainer(_ProfileForm7)
export default ProfileForm7

33. Act 2 : Scene 1 : ▸
Username
E-mail
Password
Submit

34. Act 2 : Scene 2 : ■
<form onSubmit={onSubmit}>
<div>
<label htmlFor="username">Username</label>
<input type="text" name="username" id="username"
value={values.username || ''} onChange={this.onChange} />
</div>
<div>
<label htmlFor="email">E-mail</label>
<input type="text" name="email" id="email"
value={values.email || ''} onChange={this.onChange} />
</div>
<div>
<label htmlFor="password">Password</label>
<input type="password" name="password" id="password"
value={values.password || ''} onChange={this.onChange} />
</div>
<input type="submit" />
</form>

35. Act 2 : Scene 2 : ■
class Fields extends Component {
...
}

36. Act 2 : Scene 2 : ■
class _ProfileForm8 extends Component {
schema = [{...}, {...}, {...}]
render() {
const { values, onChange, onSubmit } = this.props.form
return (
<form onSubmit={onSubmit}>
<Fields schema={this.schema}
values={values} onChange={onChange} />
<input type="submit" />
</form>
)
}
}
const ProfileForm8 = ProfileContainer(_ProfileForm8)
export { ProfileForm8 }

37. Act 2 : Scene 2 : ■
class Fields extends Component {
onChangeHandler = ev => {
const { values, onChange } = this.props;
const { name, value } = ev.target;
const newValues = {...values, [name]: (value || null) };
onChange(newValues);
};
render() {
const { schema, values } = this.props;
return (<div>...</div>);
}
}

38. Act 2 : Scene 2 : ■
schema = [{
path: "username",
label: "Username",
renderer: (path, value, label, onChange) => {
return (
<div>
<label htmlFor="username">Username</label>
<input type="text" name="username" id="username"
value={value} onChange={onChange} />
</div>
)
}
}]

39. Act 2 : Scene 2 : ■
class Fields extends Component {
onChangeHandler = ...
render() {
const { schema, values } = this.props;
return (<div>
{schema.map(field =>
field.renderer(
field.path,
values[field.path] || '',
field.label,
this.onChangeHandler)
)}
</div>);
}}

40. Act 2 : Scene 2 : ■
class _ProfileForm8 extends Component {
schema = [{...}, {...}, {...}]
render() {
const { values, onChange, onSubmit } = this.props.form
return (
<form onSubmit={onSubmit}>
<Fields schema={this.schema}
values={values} onChange={onChange} />
<input type="submit" />
</form>
)
}
}
const ProfileForm8 = ProfileContainer(_ProfileForm8)
export { ProfileForm8 }

41. Act 2 : Scene 2 : ▸
Username
E-mail
Password
Submit

42. Act 2 : Scene 3 : ■
schema = [{
path: "username",
label: "Username",
renderer: (path, value, label, onChange) => {
return (
<div>
<label htmlFor="username">Username</label>
<input type="text" name="username" id="username"
value={value} onChange={onChange} />
</div>
)
}
}]

43. Act 2 : Scene 3 : ■
const textRenderer = (path, value, label, onChange) => (
<div>
<label htmlFor={path}>{label}</label>
<input type="text" name={path} id={path}
value={value} onChange={onChange} />
</div>
)
schema = [
{ path: "username", label: "Username", renderer: textRenderer }
]

44. Act 2 : Scene 3 : ■
const textRenderer = (type = 'text') =>
(path, value, label, onChange) => (
<div>
<label htmlFor={path}>{label}</label>
<input type={type} name={path} id={path}
value={value} onChange={onChange} />
</div>
)
const passwordRenderer = () => textRenderer('password')
schema = [
{path: "username", label: "Username", renderer: textRenderer()},
{path: "email", label: "E-mail", renderer: textRenderer()},
{path: "password", label: "Password", renderer: passwordRenderer()}
]

45. Act 2 : Scene 3 : ■
class _ProfileForm9 extends Component {
schema = [
{ path: "username", label: ..., renderer: textRenderer() },
{ path: "email", label: ..., renderer: textRenderer() },
{ path: "password", label: ..., renderer: passwordRenderer() }
]
render() {
const { values, onChange, onSubmit } = this.props.form
return (
<form onSubmit={onSubmit}>
<Fields schema={this.schema}
values={values} onChange={onChange} />
<input type="submit" />
</form>
)
}
}
const ProfileForm9 = ProfileContainer(_ProfileForm9)
export { ProfileForm9 }

46. Act 2 : Scene 3 : ▸
Username
E-mail
Password
Submit

47. Act 2 : Scene 4 : ■
class _ProfileForm10 extends Component {
schema = (values) => {
const _schema = [
{ path: "username", label: ..., renderer: textRenderer() },
{ path: "email", label: ..., renderer: textRenderer() }
]
if (values.email) _schema.push(
{ path: "password", label: ..., renderer: passwordRenderer() }
)
return _schema;
}
render() {
const { values, onChange, onSubmit } = this.props.form
return ( ... <Fields schema={this.schema(values)} ... )
}
}

48. Act 2 : Scene 4 : ▸
Username
E-mail
Submit

49. ACT 3
the perfect crime!

50. yeah, well! Not yet in the public but...
yarn add @logicea/react-forms

51. Act 3 : Scene 1 : ■
export const ProfileContainer = Child => {
class Container extends React.Component {
state = { values: {}, errors: {} };
onSubmit = ev => post('/api/me', this.state.values)
onChange = (values, errors) => {
this.setState(prevState => ({ ...prevState, values, errors }));
};
render() {
const { children, ...childProps } = this.props;
const { values, errors } = this.state;
const { onChange, onSubmit } = this;
return (
<Child {...childProps}
form={{values, errors, onChange, onSubmit}}>
{children}</Child>
)}}
return Container;
}}

52. Act 3 : Scene 1 : ■
onChange = ev => {
const { values, errors } = ev.detail
this.setState(prevState => ({ ...prevState, values, errors }));
};

53. Act 3 : Scene 1 : ■
import Fields from '@logicea/react-forms/Fields'
class _ProfileForm11 extends Component {
schema = (values) => {
const _schema = [
{ row: 1, path: "username", ... },
{ row: 2, path: "email", ... }
]
if(...) _schema.push({ row: 3, path: "password", ... }) })
}
render() { ... }
}

54. Act 3 : Scene 1 : ▸
Username
E-mail
Submit

55. Act 3 : Scene 2 : ■
import Fields from '@logicea/react-forms/Fields'
import yup from 'yup'
class _ProfileForm12 extends Component {
schema = [
{ path: "username", validator: yup.string().required(), ... },
{ path: "email", validator: yup.string().email(), ... },
{ path: "password", validator: yup.string().min(4), ... },
]
render() {
const { values, errors, onChange, onSubmit } = this.props.form
return ... <Fields schema={this.schema(values)}
values={values} errors={errors} onChange={onChange} />
}
}

56. Act 3 : Scene 2 : ■
const textRenderer = (type = 'text') =>
(path, value, label, onChange, error) => (
<div>
<label>...</label>
<input ... />
{error && <div style={{ color: 'red' }}>{error}</div>}
</div>
)
const passwordRenderer = () => textRenderer('password')

57. Act 3 : Scene 2 : ▸
Username
E-mail
Password
Submit

58. Act 3 : Scene 3 : ■
class _ProfileForm13 extends Component {
schema = (values) => {
const _schema = [
...
{ row: 4, path: "country", label: "Country",
dependands: ["city"], renderer: textRenderer() },
{ row: 5, path: "city", label: "City",
renderer: textRenderer() },
]
return _schema;
}
render() { ... }
}

59. Act 3 : Scene 3 : ▸
Username
E-mail
Password
Country
City
Submit

60. Act 3 : Scene 4 : ■
const COUNTRIES = [
'Greece',
'Burundi',
'Democratic Republic of Congo',
'Central African Republic'
]
const CITIES = {
'Greece': ['Athens', 'Thessaloniki'],
'Burundi': ['Bujumbura', 'Muyinga'],
'Democratic Republic of Congo': ['Kinshasa', 'Lubumbashi'],
'Central African Republic': ['Bangui', 'Bimbo']
}

61. Act 3 : Scene 4 : ■
const selectRenderer = (options = [])
=> (path, value, label, onChange, error) => (
<div>
<label htmlFor={path}>{label}</label>
<select name={path} id={path}
value={value} onChange={onChange}>
<option value=''></option>
{options.map(o => <option value={o} key={o}>{o}</option>)}
</select>
{error && <div style={{ color: 'red' }}>{error}</div>}
</div>
)
}

62. Act 3 : Scene 4 : ■
class _ProfileForm14 extends Component {
schema = (values, allCountries, allCities) => {
const cities = values.country ? allCities[values.country] : []
const _schema = [...
{ path: "country", renderer: selectRenderer(allCountries) ...
{ path: "city", renderer: selectRenderer(cities) ...
]
return _schema;
}
render() {
const schema = this.schema(values, COUNTRIES, CITIES)
...
}
}

63. Act 3 : Scene 4 : ▸
Username
E-mail
Password
Country
City
Submit

64. Act 3 : Scene 5 : ■
const getCountries = (props) => {
return new Promise(r => setTimeout(() => r(COUNTRIES), 200))
}
const getCities = (props) => {
const selectedCountry = props.form.values.country
const citiesResponse = CITIES[selectedCountry] || []
return new Promise(r => setTimeout(() => r(citiesResponse), 200))
}

65. Act 3 : Scene 5 : ■
class _ProfileForm15 extends Component {
schema = (values, countries, countryCities) => [...
{ path: "country", renderer: selectRenderer(countries) ...
{ path: "city", renderer: selectRenderer(countryCities) ...
]
render() {...
const { countries, cities } = this.props.lookups
const schema = this.schema(values, countries, cities)
}
}
const ProfileForm15 = compose(ProfileContainer(), Lookups({
initial: ['countries'],
resolver: (lookupField) => { ... },
rules: (oldProps, newProps) => { ... },
}))(_ProfileForm15)
export { ProfileForm15 }

66. Act 3 : Scene 5 : ■
const lookupsResolver = (lookupField) => {
switch (lookupField) { // eslint-disable-line default-case
case 'countries': return getCountries;
case 'cities': return getCities;
}
}
const lookupRules = (oldProps, newProps) => {
let lookups = []
const countryChanged =
oldProps.form.values.country !== newProps.form.values.country
if (countryChanged) lookups.push('cities')
return { lookups }
}

67. Act 3 : Scene 5 : ▸
Username
E-mail
Password
Country
City
Submit

70. Forms: other libs
complex
feature full
bloated
simple
state mgmt
redux-free
our inspiration
joi based
not mature
react-joi-forms

71. Performance

72. Performance - @logicea/react-forms

73. Performance - Formik

74. Performance - Formik vs Redux Form