{"id":281648,"date":"2019-01-24T08:14:55","date_gmt":"2019-01-24T15:14:55","guid":{"rendered":"http:\/\/css-tricks.com\/?p=281648"},"modified":"2020-01-02T17:08:07","modified_gmt":"2020-01-03T00:08:07","slug":"using-react-and-xstate-to-build-a-sign-in-form","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/using-react-and-xstate-to-build-a-sign-in-form\/","title":{"rendered":"Using React and XState to Build a Sign In Form"},"content":{"rendered":"

Update 15th June 2019<\/h3>\n

A number of changes to XState have occurred since writing this article. An updated version of a sign-in form using React & XState can be found here<\/a>.<\/p>\n

\n

To make a sign in form with good UX requires UI state management, meaning we\u2019d like to minimize the cognitive load to complete it and reduce the number of required user actions while making an intuitive experience. Think about it: even a relatively simple email and password sign in form needs to handle a number of different states, like empty fields, errors, password requirements, loading and success.<\/p>\n

Thankfully, state management is what React was made for and I was able to create a sign in form with it using an approach that features XState<\/a>, a JavaScript state management library using finite machines.<\/p>\n

<\/p>\n

State management? Finite machines? We\u2019re going to walk through these concepts together while putting together a solid sign in form.<\/p>\n

Jumping ahead, here\u2019s what we\u2019re going to build together:<\/p>\n

\"\"<\/figure>\n