Calm down your overreactive forms with uncontrolled components
React India 2022 ⚛️ 🇮🇳
👋 Hey there!
I'm Akash Hamirwasia
Writing code @Razorpay. Love building products on the web, trying out new technologies and contributing to open-source.
| Twitter, GitHub: | @blenderskool |
| Website: | akashhamirwasia.com |
akashhamirwasia.comLet’s talk about Forms
akashhamirwasia.comForms are important!
- They are the most interactive part of any web app.
- A poorly optimized form can be a jarring experience to the user.
- What is poorly optimized?
- Can be the UI / UX of the form.
- Can be the accessibility of the form fields.
- Can also be the performance of the form.No-one likes a form that has a noticeable lag while typing.
akashhamirwasia.comHow forms are usually built in React
const Form = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
return (
<Card>
<form onSubmit={handleLogin}>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<button type="submit">Login</button>
</form>
</Card>
);
};How forms are usually built in React
const Form = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
return (
<Card>
<form onSubmit={handleLogin}>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<button type="submit">Login</button>
</form>
</Card>
);
};How forms are usually built in React
const Form = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const handleLogin = () => {
// Use values of 'email' and 'password' here
};
return (
<Card>
<form onSubmit={$handleLogin$}>
{/* ... */}
</form>
</Card>
);
};Let’s count the
number of renders
It’s bad!
Gets even worse with more components!
Number of renders: 1
I've been a victim to this 🥲
akashhamirwasia.comYes, you could React.memo() the components...
akashhamirwasia.com...and useMemo() some expensive calculations...
akashhamirwasia.com...but that doesn’t solve the problem of over-rendering.
akashhamirwasia.comRemember Uncontrolled components?
- Uncontrolled component is one that stores its state data internally.
- The consumer does not “control” the component’s state, it asks the component whenever it needs latest data.
- In case of form elements,
- The DOM manages the state of the form fields.
- React components don't manage the state, hence re-renders are not required for changes.
akashhamirwasia.comUncontrolled forms 😯
- We can use uncontrolled components for simple forms with
lot less boilerplate. - And provide a great UX + DX.
- Just like Kent said 3 years back 🙏
Kent C. Dodds 🌌@kentcdodds
I think people control inputs more than they need to. Use uncontrolled unless you actually need to control the value of the input 🤷♂️
3:21 AM · Sep 24, 2019 · Twitter Web App
akashhamirwasia.comHow most forms should be built
feat. Uncontrolled components
const Form = () => {
const handleLogin = (e) => {
const formData = new FormData(e.target);
// Use 'formData' to access values
};
return (
<Card>
<form onSubmit={handleLogin}>
<input type="email" name="email" />
<input type="password" name="password" />
<button type="submit">Login</button>
</form>
</Card>
);
};Number of renders: 1
akashhamirwasia.comHow most forms should be built
feat. Uncontrolled components
const Form = () => {
const handleLogin = (e) => {
const formData = new FormData(e.target);
// Use 'formData' to access values
};
return (
<Card>
<form onSubmit={handleLogin}>
<input type="email" name="email" />
<input type="password" name="password" />
<button type="submit">Login</button>
</form>
</Card>
);
};Number of renders: 1
akashhamirwasia.comHow most forms should be built
feat. Uncontrolled components
const Form = () => {
const handleLogin = (e) => {
const formData = new FormData(e.target);
const values = Object.fromEntries(
formData.entries()
);
// Use 'values' to access values
};
return (
<Card>
<form onSubmit={handleLogin}>
<input type="email" name="email" />
<input type="password" name="password" />
<button type="submit">Login</button>
</form>
</Card>
);
};Number of renders: 1
akashhamirwasia.comLooks awesome right?
Even though it’s not the most React way of doing things, it works very well for most forms.
Sadly, it has various drawbacks for “serious” forms 😕
Performing complex validation
Fields that cause changes in the UI
Update values declaratively
Computed field values
Lost reactivity and control
akashhamirwasia.comWe like the simplicity and performance...
...but not at the cost of reactivity.
akashhamirwasia.com👋 On-demand reactivity
aka. Cause state updates only when you need, use Uncontrolled components otherwise.
Let's build a simple API around this idea.
aka. Let's overengineer this 😛
akashhamirwasia.comSome refactoring...
const Form = () => {
const fields = useRef({}).current;
return (
<form>
<input
type="email"
name="email"
ref={(el) => $fields['email'] = el$}
/>
<input
type="password"
name="password"
ref={(el) => $fields['password'] = el$}
/>
</form>
);
};const Form = () => {
const fields = useRef({}).current;
return (
<form>
<input
type="email"
name="email"
ref={(el) => fields['email'] = el}
$onChange$={() => {
/**
* trigger render if we are listening for 'email' input
*/
}}
/>
<input
type="password"
name="password"
ref={(el) => fields['password'] = el}
$onChange$={() => {
/**
* trigger render if we are listening for 'password' input
*/
}}
/>
</form>
);
};const Form = () => {
const fields = useRef({}).current;
const handleChange = (e) => {
const name = e.target.name;
/**
* trigger render if we are listening for input with name 'name'
*/
}
return (
<form>
<input
type="email"
name="email"
ref={(el) => fields['email'] = el}
onChange={$handleChange$}
/>
<input
type="password"
name="password"
ref={(el) => fields['password'] = el}
onChange={$handleChange$}
/>
</form>
);
};Extract to useForm() hook
const $useForm$ = () => {
const fields = useRef({}).current;
const handleChange = (e) => {
const name = e.target.name;
/**
* trigger render if we are listening for input with name 'name'
*/
}
const register = (name) => ({
name,
ref: (el) => fields[name] = el,
onChange: handleChange
});
return { register };
}
......
const $Form$ = () => {
const { register } = useForm();
return (
<form>
<input type="email" {...register("email")} />
<input type="password" {...register("password")} />
</form>
);
}...
const Form = () => {
const { register } = useForm();
return (
<form>
<input type="email" {...register("email")} />
<input type="password" {...register("password")} />
<input type="password" {...register("confirmPassword")} />
</form>
);
}Thinking about the API first
const Form = () => {
const { register } = useForm();
return (
<form>
<input type="email" {...register("email")} />
<input type="password" {...register("password")} />
<input type="password" {...register("confirmPassword")} />
</form>
);
}const Form = () => {
const { register, $getValues$ } = useForm();
const handleSignup = () => {
const values = $getValues$();
/* use values as needed */
}
return (
<form onSubmit={$handleSignup$}>
<input type="email" {...register("email")} />
<input type="password" {...register("password")} />
<input type="password" {...register("confirmPassword")} />
</form>
);
}getValues() to get latest values of the form at any point.
const Form = () => {
const { register, getValues, $watch$ } = useForm();
const handleLogin = () => {
const values = getValues();
/* use values as needed */
}
return (
<form onSubmit={handleLogin}>
<input type="email" {...register("email")} />
<input type="password" {...register("password")} />
<input type="password" {...register("confirmPassword")} />
{watch("password") !== watch("confirmPassword") && "Passwords don't match!"}
</form>
);
}watch() to declaratively subscribe to changes to a form field.
const Form = () => {
const { register, getValues, $watch$ } = useForm();
const handleLogin = () => {
const values = getValues();
/* use values as needed */
}
return (
<form onSubmit={handleLogin}>
<input type="email" {...register("email")} />
<input type="password" {...register("password")} />
<input type="password" {...register("confirmPassword")} />
<input type="checkbox" {...register("checkPasswordMatch")} />
{
watch("checkPasswordMatch") ? (
watch("password") !== watch("confirmPassword") && "Passwords don't match!"
) : null
}
</form>
);
}Implementing useForm() hook
const useForm = () => {
const fields = useRef({}).current;
const handleChange = (e) => {
const name = e.target.name;
// TODO
}
const getValues = () => {
const values = Object.entries(fields).map(([key, el]) => [key, el.value])
return Object.fromEntries(values);
}
...
return { register, $getValues$ };
}const useForm = () => {
const fields = useRef({}).current;
const watched = new Set();
const handleChange = (e) => {
const name = e.target.name;
if (watched.has(name)) {
// Trigger re-render
}
}
// Return the current input value, subscribe for future
const watch = (name) => {
watched.add(name);
return fields[name]?.value ?? '';
}
...
return { register, getValues, $watch$ };
}Implementing useForm() hook
const useForm = () => {
const fields = useRef({}).current;
const watched = new Set();
const [,forceRender] = useState(0);
const handleChange = (e) => {
const name = e.target.name;
if (watched.has(name)) {
forceRender(x => x + 1);
}
}
const watch = (name) => {
watched.add(name);
return fields[name]?.value ?? '';
}
...
return { register, getValues, $watch$ };
}For the consumer
const Form = () => {
const { register, getValues, watch } = useForm();
const handleSignup = () => {
const values = getValues();
}
const $isInvalid$ = watch('checkPasswordMatch') &&
watch('password') !== watch('confirmPassword');
return (
<form onSubmit={handleSignup}>
<input type="email" {...register("email")} />
<input type="password" {...register("password")} />
<input type="password" {...register("confirmPassword")} />
<input type="checkbox" {...register("checkPasswordMatch")} />
{$isInvalid$ && "Passwords don't match!"}
</form>
);
}Number of renders: 1
akashhamirwasia.comSo, is this the best? 🙌
Sadly, we are still over-rendering!
Because we render on input change, not on derived data change.
Number of renders: 1
akashhamirwasia.comMemoize derived data and render only when it changes
akashhamirwasia.comDefining derived data
const Form = () => {
const { register, getValues, watch } = useForm({
$derived$: {
isInvalid: (values) => values.password !== values.confirmPassword
}
});
return (
<form onSubmit={handleSignup}>
...
{ watch("isInvalid") && "Passwords don't match!" }
</form>
);
}Memoizing derived data
const useForm = ({ $derived$ }) => {
...
const $getDerived$ = () => {
return Object.fromEntries(
Object
.entries(derived)
.map(([name, fn]) => [name, fn(getValues())])
);
};
const $memoized$ = useRef(getDerived());
const $isDerivedDifferent$ = (nextDerived) => {
return Object.keys(derived).some(
(name) => watched.has(name) && nextDerived[name] !== memoized.current[name]
);
};
...
return { register, getValues, $getDerived$, watch };
}const useForm = ({ $derived$ }) => {
...
const getDerived = () => {...};
const memoized = useRef(getDerived());
const isDerivedDifferent = (nextDerived) => {...};
const handleChange = (e) => {
const name = e.target.name;
const nextDerived = getDerived();
if (watched.has(name) || isDerivedDifferent(nextDerived)) {
forceRender((x) => x + 1);
}
memoized.current = nextDerived;
};
const watch = (name) => {
watched.add(name);
return fields[name]?.value ?? memoized.current[name] ?? "";
};
...
}Testing it out
const Form = () => {
const { register, getValues, watch } = useForm({
$derived$: {
isInvalid: (values) =>
values.password !== values.confirmPassword
}
});
return (
<form onSubmit={handleSignup}>
<input type="email" {...register("email")} />
<input type="password" {...register("password")} />
<input type="password" {...register("confirmPassword")} />
{watch("isInvalid") && "Passwords don't match!"}
</form>
);
}Remember: Use this only if you need to!
Number of renders: 1
akashhamirwasia.comWait, there's some good news!
You don't have to implement useForm(), because it's already available as a library.
akashhamirwasia.com
Made by
Bill Luo • @bluebill1049and the awesome community
Bill Luo • @bluebill1049npm i react-hook-formUsing react-hook-form
import { useForm } from 'react-hook-form';
const Form = () => {
const { register, getValues, watch } = useForm();
const handleSignup = () => {
const values = getValues();
}
return (
<form onSubmit={handleSignup}>
<input type="email" {...register("email")} />
<input type="password" {...register("password")} />
<input type="password" {...register("confirmPassword")} />
{watch("password") !== watch("confirmPassword") && "Passwords don't match!"}
</form>
);
}Summarizing 💡
- Why using state for storing all form data might not be a good approach.
- Use uncontrolled components when your UI does not depend on the form.
- Selectively listen to only required fields for changes.
- Listen to data changes instead of input changes using memoization.(Only if it causes bottlenecks!)
- Wrap everything in a delightful API.
akashhamirwasia.comTake a peek at the internals of libraries 🔬
You'll get to learn some awesome stuff!
Thank you! 🙌 🇮🇳
Let's connect
| Twitter, GitHub: | @blenderskool |
| LinkedIn: | linkedin.com/in/akash-hamirwasia |
| Email: | [email protected] |
| Website: | akashhamirwasia.com |
Calm down your overreactive forms with uncontrolled components React India 2022 ⚛️ 🇮🇳