Forem: Bill

What's coming in React Hook Form - Version 7

Bill — Tue, 16 Feb 2021 09:37:23 +0000

React Hook Form is about turning 2 years old. The project itself is still as active as it was on day one. Over the years, there have been lots of learnings and experiences which contributed to the make and design of Version 7. I am here to present you with some of the reasons and improvements in the next major version. Our mission remains the same is to make every React developer's life easier in terms of building forms.

V7 visions:

📖 (DX) Strictly typed form
💁‍♂️ Simplicity and consistency
🏎 Performance
🏋🏻‍♀️ Reduce package size

Let's diving into the APIs to reflect those visions which we have set from the beginning.

</> `register`

One of the major changes will be the register API. As most of you would know React Hook Form is built on typescript, and having type-safe is an important aspect for most typescript developers. One of the challenges that we are facing is to type check input name. This is made possible with typescript 4.1 update Template Literal. I was really excited to find that out and started planning ahead to make sure this new feature will be compatible with React Hook Form.

Here is the necessary change:

- <input name="test" ref={register} />
+ <input {...register('test')} />

// the following props will be spread into inputs
const { onChange, onBlur, ref, name } = register('test');

As you can see above, now we can do a type check by invoking the function above. The original API has its pros and cons, and it's definitely not compatible with type-safe. Adopting this change will affect the type check to the rest of the hook form's API, such as useController, Controller and etc.

The following image demonstrates the type check against the nested field input name.

You can try out with the following codesandbox with beta version installed:

</> `resolver`

For those who are using schema validation, resolver is getting power lifted. The current resolver lacks validation context, which means the formation about the inputs been validated are missing. We are improving on this part, developers will be able to access which field is been validated and so do its ref. This can potentially unlock the following functionality:

Validation optimization: If any schema validation library support field-level validation, this will allow the developer to optimize validation without running the entire schema each onChange.
Focus management: Access to the input DOM element for better custom focus management.

Here is the Resolver's type definition:

- resolver: (values: any, context?: object) => Promise<ResolverResult> | ResolverResult
+ resolver: (
+   values: any, 
+   context: object | undefined, 
+   options: { 
+     criteriaMode?: 'firstError' | 'all', 
+     names?: string[],
+     fields: { [name]: field } // Support nested field
+   }
+ ) => Promise<ResolverResult> | ResolverResult

Joris is the man behind all those amazing work, he will write a detailed technical blog post around resolver.

</> `useFormState`

As the current version of hook form, form state update will be re-rendered at the root/form level where you invoked useForm. This is about to change in Version 7, with this newly introduced custom hook useFormState, you can subscribe to individual form state update at the component level. This means as a developer you have control over when your components get informed with form state update. We have also baked useFormState into useController and Controler, so each controlled input will be completely isolated in terms of re-render.

// Subscribe to isDirty, touchedFields at the component level
const { isDirty, touchedFields } = useFormState();

// Subscribe **only** to isDirty and isTouched.
const Test = () => {
  const { meta: { isDirty, isTouched } } = useController();
}

Here is a good example of our DevTool in which the re-render is isolated at the component level by leveraging this new custom hook.

</> `useForm`

From the beginning of the initial version, we are trying to be aligned with HTML standards and how native form behaviors. One of the examples is when input removed, its value will be omitted too. However, such behavior also made many React developers confused about why input value disappeared after unmount, to ease the concern we had to introduce shouldUnregister config to give users the option. As a result, this leads to quite a lot of extra logic and complexity within the codebase. In Version 7, we are dropping shouldUnregister, which means developers will have to control their input value remove with unregister. It definitely has its own pros and cons, but I think this change will make more sense to most React developers. Here is an example below:

const [show, setShow] = React.useState(true);

// V6 the following input value will be removed
{show && <input ref={register} name="test"} 

// V7 the following input value will be retained
{show && <input {...register('test')}} // V7

// V7 until the following line is invoked then the value will be removed
unregister('test')

The change also helped a lot with the lib bundle size.

Conclusion

React Hook Form will have better type checks in general, smaller, faster, and more developer-friendly. I hope the post will explain what are the rationales and improvements that we are trying to bake into Version 7. If you have any feedback, concern, or question, you can always join our Version 7 RFC:

You can also watch this short talk which I posted on youtube around V7 (17mins).

Bonus

We also made the following improvement:

Documentation:

DevTool:

Thanks

Thanks go to everyone who is involved and contributed to this major version. Special thanks go to:

Joris who has made the next version of the resolver and the rest of hook form team.
wdfinch who has consistently involved in V7 discussion and reporting bugs and issues alone the way.

❤️ Thank you for backing and sponsoring the project!

Optimising page performance (image) with intersection observer

Bill — Wed, 12 Jun 2019 00:31:31 +0000

Single page applications (SPA) has become increasingly mainstream. Thanks to those brilliant Javascript frameworks for making the web application greater and more advanced 👏🏼.

Right now, however, optimization of web page performance is critical. This is because the responsiveness of a page significantly impacts whether a customer will remain on a particular site or not.

Over the past few weeks, our team has been working hard to improve our website performance. Those beautiful but large images on our pages really slow down the page load and delay the meaningful paint time. So we thought of easily lazy loading them with a placeholder to remediate this problem.

The web indeed provides numerous solutions for lazy load images. But they do not support responsive images, placeholders with animation out of the box, and allowing the specification of an image distance threshold to be met before triggering the load. Hence, we decided to tackle this problem and contribute to the React community. ✍️ I would like to thanks Yusinto Ngadiman and Will Po for their wonderful efforts in contributing 🎩.

Introducing React Simple Img: A React component library makes images load on demand and super simple to set up with placeholders and animation. Here is a quick example code on how it works 😘.

import { SimpleImg } from 'react-lazyLoad-images';

export const App = () => <SimpleImg src="your image path" />;

You only need to use the SimpleImg component and the image will be lazy loaded with animation. 💥

This is what the placeholder part of react-simple-img achieves:

Super simple right!! I have also build a demo page, feel free to check it out here.

We now get a much faster meaningful paint time, which happens before the image is fully loaded even with a slow network connection. All images are lazy loaded with placeholders and animation. The page looks even more beautiful 👏👏👏

So, if you looking for a way to optimize your web page, why not give React Simple Img a quick try! If you find it useful leave me a star on the GitHub. It would definitely make my day. ❤️❤️❤️ Also, please feel free to leave a question in the comment section below too.

Finally, I really appreciate reading the blog. I hope you will find it useful. Let’s all make our web apps a better place to give a more desirable experience to our customers!

React UI animation made simple

Bill — Sun, 09 Jun 2019 08:21:34 +0000

What makes UI elegant, sexy and beautiful? Design is the first thing that pops up in mind. The modern web has a long way to go! It’s time to push web UI to the next level with animations. I lost count how many times I was amazed by iOS and Android’s beautiful animation, while most of my web apps remain static and “boring”. Static design is like a beautiful 👸 on a poster. It doesn’t move or interact with you! Animation makes static UI alive and vivid.

Rewind back to my experience, toggling (showing/hiding) an element is one of the most common tasks in UI, which I have done like below for a long time… (shamefully)

import React from 'react';

export default function Component ({ isContentReady }) {
    return isContentReady ? <div>Content</div> : null;
}

I slowly evolved from this to css to perform the toggling

.wrapper {
  transition: 1s all;
}

.hide {
  opacity: 0;
}

.show {
  opacity: 1;
}

import React from 'react';
import styles from './styles.css'

export default function Component ({ isContentReady }) {
    return <div className={styles.wrapper}>
        <span className={isContentReady ? styles.show : styles.hide}>Content</span>
    </div>;
}

While that works, I often lost track of what the actual style looks like when glancing quickly at the code. I kept feeling this is not the best approach to implement the animation.

There should be a better and easier way to perform animations in React. So I wrote my own. I present to you react-simple-animate.

import React from 'react';
import Animate from 'react-simple-animate';

export default function Component ({ isContentReady }) {
    return <Animate 
      play={isContentReady}
      start={{ opacity: 0 }}
      end={{ opacity: 1 }}
    >
      Content
    </Animate>;
}

A declarative and simple way to perform animation in react. I can control the start of the animation and the styles to apply at the end of the animation. This is a good pattern in my opinion. Hooray!

React Simple Animate

React simple animate 🤘 is the way to go! Oh yes, it’s my 2c worth contributing to the community after years of using open source software (first time too). The goal is to make UI animation as easy as possible for React

Here are two awesome examples of what I was able to achieve using react-simple-animate:

While React simple animation is great it has some pros and cons:

😍 Pros:

Simple animation from inline style A to style B
Declarative for component animation
Make animation toggle easy
Support animation sequences
Support keyframes animation
It’s a tiny size (2.2kb)

😑 Cons:

it’s made for simple animation 🤘

The best way to see how simple it is to try it yourself, which you can do with the demo.

Overall, I hope react-simple-animate will help everyone create more elegant UI with beautiful animation, and of course, thanks for your time reading this and trying out the package. 🤘

⛓ Uncontrolled form validation with React

Bill — Tue, 04 Jun 2019 03:58:01 +0000

When we working with form validation, most of us would be familiar with libraries such as Formik and Redux-form. Both are popular among the community and built with Controlled Components.

What is Controlled Component?

React is driving the internal state of itself. Each input interaction or change will trigger the React's Component life cycle. The benefit of having that is:

Every state mutation will have an associated handler function. This makes it straightforward to modify or validate user input.

This feature is great for handling forms validation. However, there is a hidden cost. If you run the following code and pay attention to the developer console;

function Test() {
  const [numberOfGuests, setNumberOfGuests] = useState();
  console.log('rendering...');

  return (
    <form onSubmit={() => console.log(numberOfGuests)}>
      <input
        name="numberOfGuests"
        value={numberOfGuests}
        onChange={setNumberOfGuests} />
    </form>
  );
}

You should see console.log repeating 'rendering...' in the dev console each time as you type. Obviously, the form is getting re-rendered each time. I guess with simple use case it wouldn't cause much of issue. Let's try to implement something which is more close to a real-world example.

function Test() {
  const [numberOfGuests, setNumberOfGuests] = useState();
  expensiveCalculation(numberOfGuests); // Will block thread
  console.log('rendering...');

  return (
    <form onSubmit={() => console.log(numberOfGuests)}>
      <input
        name="numberOfGuests"
        value={numberOfGuests}
        onChange={setNumberOfGuests} />
    </form>
  );
}

It's pretty much the same code, except this time each render will execute an expensive function before render. (let's assume it will do some heavy calculation and blocking the main thread) hmmm... now we have an issue because user interaction can be potentially interrupted by that. As a matter of fact, this type of scenario did give me a headache in terms of form performance optimization.

Solution

Off course there are solutions on the table, you can use a memorize function to prevent execute the function on each render. An example below:

function Test() {
  const [numberOfGuests, setNumberOfGuests] = useState();
  // The following function will be memoried with argument and avoid recalculation
  const memoizedValue = useMemo(() => computeExpensiveValue(numberOfGuests), [numberOfGuests]);

  return (
    <form onSubmit={() => console.log(numberOfGuests)}>
      <input
        name="numberOfGuests"
        value={numberOfGuests}
        onChange={setNumberOfGuests} />
    </form>
  );
}

However, we actually have another option to skip re-render the form when user typing.

Uncontrolled Components

What's Uncontrolled Component?

In most cases, we recommend using controlled components to implement forms. In a controlled component, form data is handled by a React component. The alternative is uncontrolled components, where form data is handled by the DOM itself.

This means if you are going to build uncontrolled form and you will be working on methods to handle the DOM and form interaction. Let's try an example with that then.

function Test() {
  const numberOfGuests = useRef();
  expensiveCalculation(this.state.numberOfGuests);

  return (
    <form onSubmit={() => console.log(numberOfGuests.current.value)}>
      <input
        name="numberOfGuests"
        ref={numberOfGuests}
        value={numberOfGuests} />
    </form>
  );
}

By leveraging uncontrolled component, we exposed with the following benefits:

User interaction no longer triggers re-render on change.
Potential less code to write.
Access to input's ref gives you the power to do extra things, such as focusing on an error field.

I guess one quick question will pop up in your head, what if I want to listen for input change? Well now you are the driver of the inputs, you can handle that by native DOM event. (it's all just javascript) example below:

function Test() {
  const numberOfGuests = useRef();
  const handleChange = (e) => console.log(e.target.value)

  useEffect(() => {
    numberOfGuests.current.addEventListener('input', handleChange);
    return () => numberOfGuests.current.removeEventListner('input', handleChange);
  })

  return (
    <form onSubmit={() => console.log(numberOfGuests.current)}>
      <input
        name="numberOfGuests"
        ref={numberOfGuests} />
    </form>
  );
}

At this point, we are writing more code than Controlled Component. But what if we can build a custom hook to handle all of that and re-use the same logic throughout multiple forms within the app.

Hooks

Check out the example below; a custom form validation hook:

import useForm from 'react-hook-form';

function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => { console.log(data) };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="numberOfGuests"ref={register({ required: true })} />
    </form>
  )
}

As you can see from above, the implementation is clean and simple. There is no render-props wrap around the form, no external components to wrap around individual fields and validation rules are centralized too.

Conclusion

The uncontrolled component can be a better performance neat and clean approach and potentially write a lot less code and better performance. If you find above custom hook example interest and like the syntax. You can find the Github repo and docs link below:

Github: https://github.com/bluebill1049/react-hook-form
Website: https://react-hook-form.com

☕️ Thanks for reading.

React form validation with Hook in 5kB

Bill — Mon, 29 Apr 2019 23:39:57 +0000

TL;DR: Introducing a new React Hook library to deal with form validation with an easier and cleaner approach (IMHO).

I have been dealing with forms over the past years, whether it’s a single form submission or multiple steps funnel.

Recently React 16.8 have landed us with Hook, which in my opinion is one the greatest features that React team has been delivered🌹(Thank you React Team). Therefore, I have discovered a new approach to write form validation, potentially a cleaner approach. let me show you the code 🔎

import React from 'react'
import useForm from 'react-hook-form'

function App() {
  const { register, handleSubmit, errors } = useForm() // initalise the hook
  const onSubmit = (data) => { console.log(data) } // submission when input are valid

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="firstname" ref={register} /> // register input

      <input name="lastname" ref={register({ required: true })} /> // register as required field
      {errors.lastname && 'Last name is required.'} // display error message when last name is not valid

      <input name="age" ref={register({ pattern: /\d+/ })} />  // register as input with pattern
      {errors.age && 'Please enter number for age.'} // display error message when age is not valid

      <input type="submit" />
    </form>
  )
}

As you can see from the example above, there is no Component have been imported. So instead of having controlled input/select over the form, this approach leverage uncontrolled form input and registering their ref into the React hook form. This allows the hook to have full control and insight over your form elements, and hence this reveal many other benefits:

No external Components required to wrap around inputs, which made the hook library much smaller (5kb gzip)
Because it’s uncontrolled, you are no longer required to have onChange and set value to your input, start leveraging your existing HTML markup.
With Component’s ref been registered into the Hook, you can easily access its ref when an error occurred, and anchors to the particular field.
Much simpler API, because validation occurs at the register level.
Great for performance as input change no longer trigger re-render, check out the performance comparison here.
Easy form state access, since Hook is holding refs for each input. you can easily query the value of them.
Support browser build-in validation ❤️.

Those are my summaries of benefits over using React Hook Form, I think with this approach, things are much simpler (IMHO). Please check out the website for a live demo, I have also built a form builder which allows you to create form and copy/paste code to your environment or codeSandbox to test them out. Many examples also live on the Github page.

I really hope this will make form validation easier, and feel free to leave me with issue or suggestion on Github (please leave a star if you find it useful 🙏🏻). ❤️ Thank you for reading.

Forem: Bill

What's coming in React Hook Form - Version 7

V7 visions:

</> register

</> resolver

</> useFormState

</> useForm

Conclusion

Bonus

Thanks

Optimising page performance (image) with intersection observer

React UI animation made simple

React Simple Animate

⛓ Uncontrolled form validation with React

What is Controlled Component?

Solution

Uncontrolled Components

Hooks

Conclusion

React form validation with Hook in 5kB

</> `register`

</> `resolver`

</> `useFormState`

</> `useForm`