The React Newsletter

Hi <<First Name>>,

Form Validation Using Custom React Hooks

Build a form validation engine using custom React Hooks, from scratch, without having to learn a single form library. Read on to learn how!

In part one, Simplify Forms using Custom React Hooks, we abstracted away all of the form event handler logic into a custom React Hook. As a result, the code in our form components was reduced by a significant amount.

After publishing last week’s tutorial, I had a number of readers ask how I’d use React Hooks to solve two common problems related to forms:

Initializing the form values
Validation

Therefore, I’ll be answering these questions in this tutorial. So, let’s begin learning how to initialize form values and handle form validation using React Hooks.

Scheduling in React

In modern applications, user interfaces often have to juggle multiple tasks at the same time. For example, a search component might need to respond to user input while providing auto completion results, and an interactive dashboard might need to update charts while loading data from the server and sending analytics data to a backend.

All these parallel steps can lead to slow and unresponsive interfaces and unhappy users, so let’s learn how we can fix this.

Scheduling in User Interfaces

Our users expect immediate feedback. Whether they are clicking on a button to open a modal or adding text to an input field, they don’t want to wait before seeing some kind of confirmation. For example, the button could show a modal and the input field could display the key that was typed.

To visualize what happens when this is not the case, let’s take a look at the demo application that Dan Abramov presented at his talk, Beyond React 16, at JSConf Iceland 2018.

The application works like this: The more you type into the input below, the more detailed the charts below will get. Since both of the updates (the input element and the chart) run at the same time, the browser has to do so much computation that it will drop some frames. This leads to noticeable delays and a bad user experience

#3 useState

Watch video

Coding a Finite-State Machine in a React Hook

The biggest buzz in the React Community right now has got to be ‘Hooks.’ Hooks is a new API announced at ReactConf 2018 and was just released as stable in react 16.8.0. Hooks, simply put, allows you to solve many of the same problems you used class components for, but in a composable and functional way. At the same time, there is a not so new method for modeling state that has existed long before react was even thought about. This method is known by many names but often is called a finite-state machine or even just a state machine.

In this post, I thought it would be interesting to implement an old data modeling process with the new hooks API. Specifically, I will be implementing a common pattern in front-end development: asynchronous fetching of data.

Persisting data with localStorage and Redux middleware

LocalStorage is one of many powerful tools at your disposal as a Web Developer. If you need to persist data across sessions, localStorage is a great place to do it. For example, you may wish to persist a theme, or other UI related data so that when a user leaves your app, their experience is saved allowing you to restore from their previous session.

In the following section, I am going to talk about how to use localStorage and where it fits within your application.

How to use React’s new Context API to easily manage modals

How many times have you been frustrated with having to add another item in your React state along with 2 functions for opening and closing a modal ? Not to mention if you have multiple modals or you need to send them different params based on a user’s action.

From React 16.3 you can leverage the new Context API to solve this issue.

First let’s start with the stateful way of working with modals which you are probably familiar. Below there is an example on how you would implement that using react-modal.

React video courses

Because I need to pay my bills 😉