---
title: "Managing React Form State Using the React-Form Library"
description: "Shopify’s tutorial shows how to manage a React product form with the open-source react-form library from its Quilt repository. It replaces component-level useState and earlier input and submit handlers with the useForm and useField hooks, which provide form and field state, event handlers, submission, reset, and dirty tracking. The example connects each TextField to its corresponding fields entry, using its value and onChange properties so typed input is captured and displayed. It then wires the hook’s submit function, resets the form after data is handled, and disables Save until either field changes. Finally, the notEmpty validation hook requires a title and displays a required-field error when a submission contains only a description."
---

# Managing React Form State Using the React-Form Library

[Shopify](https://yomu.fyi/company/shopify) · 2023-10-18 · Sep 14, 2022

**Type:** Tutorial

## Summary

Shopify’s tutorial shows how to manage a React product form with the open-source react-form library from its Quilt repository. It replaces component-level useState and earlier input and submit handlers with the useForm and useField hooks, which provide form and field state, event handlers, submission, reset, and dirty tracking. The example connects each TextField to its corresponding fields entry, using its value and onChange properties so typed input is captured and displayed. It then wires the hook’s submit function, resets the form after data is handled, and disables Save until either field changes. Finally, the notEmpty validation hook requires a title and displays a required-field error when a submission contains only a description.

## Context

The existing form manually managed input state with useState and separate handler functions. The tutorial introduces react-form as a way to manage the entire form and its fields while sharing knowledge about Shopify’s open-source Quilt packages.

## Approach / What changed

Import useForm and useField from @shopify/react-form, assign useField to the title and description fields, and pass the resulting fields properties to the TextField components. Use the form’s submit, reset, and dirty functionality, then configure the title field with a value and notEmpty validation so empty submissions are rejected with an error.

## Takeaways

- useForm manages the state of the entire form, while useField handles an individual input’s state and validation; the fields object exposes properties including value, onChange, reset, and dirty.
- The form should call reset only after submitted fields have been passed to the backend and their data has been handled appropriately, leaving the form ready for another product.
- The notEmpty hook requires useField to receive a configuration object containing value and validates, allowing an empty title to block submission and display a required-field message.

**Tags:** [Developer Experience](https://yomu.fyi/topic/developer-experience), [Open Source](https://yomu.fyi/topic/open-source)

- Source: [Shopify](https://shopify.engineering/managing-react-form-state-using-react-form-library)
- Source URL: https://shopify.engineering/managing-react-form-state-using-react-form-library
- Ingested by Yomu: 2026-08-30T13:39:04.896Z

[Read original post](https://shopify.engineering/managing-react-form-state-using-react-form-library)