A Quick Start Guide to Query Strings with React Router

I’ve been working on a project where we wanted to implement a set of filters for a list of records on one page of our React web app and store the selected filters as state in the URL. We chose this approach so we could link directly to the page with specific filters selected. Adding […]

Using React Hooks & Context to Avoid Adding Redux Too Early

Many people think of React and Redux as inseparable, despite the Redux author’s own advice to avoid using it “until you have problems with vanilla React.”

Loading States in React Components Using TypeScript’s Discriminated Unions

Many web applications need to load data from servers that will be shown to users. It’s important for the UI to handle loading states while the requests are in-flight. Let’s say, for example, that we have a page that will load a user’s profile. We want to be able to show a loading message, then […]

Rendering Legacy Pages inside of a React Component

Recently, I needed to implement an unusual feature for a React front end: a reusable component that displays server-rendered pages from a legacy version of the same app. If you’ve found yourself in a similar situation, I hope this guide will make life easy for you!

They Say, “Everything Is a Signal.” But What Exactly Is a Reactive Signal?

During my introduction to reactive programming, I was shown a giant reactive codebase and told, “Everything is a signal.” Of course, my first question was, “What is a signal?” In my opinion, this question is the sticking point for many reactive tutorials and explanations. Is a pipeline a good analogy for a signal? Maybe an […]

React Hook for Query String State Management

On a current project, we wanted to hoist page state out of a useReducer hook into a query string of the URL. We saw this as a continual need for the project going forward, so we wanted a convenient way to build new pages that stored their state in the URL’s query string. To do […]

Intuitive React Integer Input

Input fields are some of the most fundamental aspects of any application, and front-end validation is expected these days. Unfortunately, doing even simple validation is often more complicated than many clients expect.

Solving Nested Navigation in React with TypeScript

On a recent project, we needed to support multi-level tab bar navigation within our application. With multiple variations of tab bars, each page needed to know which tabs to show. We found that TypeScript offered a good solution.

Using React Storybook to Tackle Complex Multipart Stories

Often, when developing a new React component for a web app, I find myself with lots to do. For example, I may need to add a Redux container, API endpoint, some Redux actions, and the UI of the component. These tasks are all interconnected and interdependent, so it’s difficult to know where to start and […]

Redux Thunk Best Practices for Loading Initial Data

Every application needs to handle a couple of tasks: loading initial data for users and determining what page or screen they land on. Despite being order-dependent, this logic is often scattered into various parts of the application. This can lead to subtle bugs and makes it hard to answer simple questions like, “What will the […]

Atomic Spin

Atomic Object’s blog on everything we find fascinating.

React / Redux