#297 Modeling UI states in a React form component using a finite state machine

sponsor

The Ultimate Guide to Building a UI Component Library

In this article series, TJ VanToll shares tips and strategies he’s learned from over a decade working with UI components on the web that can help you plan, build, and distribute your own corporate component library.

this week's favorite

Modeling UI states in a React form component using a finite state machine

This post explores an architectural design pattern called the finite state machine (FSM) that we used at OkCupid to craft a robust location search UX. A FSM is an architectural design pattern that allows us to model a large system as a collection of loosely coupled components. Each component in the system changes its behavior when the internal state changes.

Paging in React Query

This post will cover how to page through a collection of Star Wars characters with React Query, providing a smooth user experience.

useEncapsulation or why your React components should only use custom hooks

Given the nature of our work, that requirements change frequently and therefore code changes frequently, too, it is not surprising that our codebases become messy. Our logic gets strewn about like tools left on a workbench. The problem is that hidden in the mess of functions and objects is important information that is getting lost. Important historical decisions left without explanation or context and more. I'll try to come up with a contrived example quickly.

Using React and D3.js

When I visualize data on the web, my current favorite environment is using D3.js inside of a React.js application. These two technologies are notoriously tricky to combine. The crux of the issue is that they both want to handle the DOM.

How to use React’s concurrent mode

React’s new concurrent mode allows your interface to be rendered while data fetching is in progress, providing an improved render lifecycle and a simple way to achieve parallel data fetching for multiple components.

courses

Cybersecurity Bootcamp: Pay Only If You Get A Job

Transition into cybersecurity, a lucrative and futureproof career where you protect essential systems and data with Springboard's newest bootcamp. Senior cybersecurity analysts earn $116k a year as a national average (Ziprecruiter). With a best in-class curriculum crafted by security experts with decades of experience as hiring managers, Springboard's program will get you the technical skills you need to start your cybersecurity career. Do real-life labs and projects, get the help you need to pass essential cybersecurity certifications such as the Security+, and benefit from 1:1 mentorship from industry experts as well as dedicated career support. With Springboard's deferred tuition option and job guarantee, you can choose to pay your tuition (and nothing more) only when you get a cybersecurity job.

newsletters

Would you like to become a sponsor and advertise in one of the issues? Check out our media kit and get in touch.