Published 📅: ....
Last modified 📝: ....
Share this post on BlueskySee discussion on Bluesky
I've found myself lately working with a decent number of Array.prototype.reduce and useReducer uses. With both of these, I've been reaching for what I'm going to call the "bookkeeping pattern".
Before diving into the code, I wanted to step back a bit and outline when and where this pattern could be useful.
Let's start with a simple example, imagine you have an array of strings, that can contain some duplicates, and we want to narrow it down to only an array of unique strings. Sure, I know you could also import {uniq} from 'lodash' and be done with it (or use [...new Set([...array])]), but let's say that we wanted to implement this logic via Array.prototype.reduce for a minute!
In order to remove the duplicates, we need some way to know if we've "seen" a value before, while we could use some external value for that, we could also stash that value within the result of our reducer. Essentially we manage our own bookkeeping within the reduce call!
Let's look at some code:
let fruits = [
'apple',
'banana',
'kiwi',
'strawberry',
'apple'
];
{
// First path, maintaining the bookkeeping separate from the reduce:
let seen = new Set();
let reducedFruits = fruits.reduce((acc, fruit) => {
Alright, you might be saying that this looks like overkill for this example, clearly that [...new Set(fruits)] would be far easier and I would agree for this use case.
Let's talk about a slightly more difficult use case where I've seen this pattern become really useful: managing incremental form submissions within React with useActionState!
Imagine we have a multi-step form, something like a progressive disclosure experience where you enter your name, then your email, and maybe finally a message for example.
We could manage this form state all client side with useState's or a useReducer, and then perform a manual form submission (either mimicking it with fetch, or calling form.requestSubmit()), but we could also build it in a way that should work without JS as well!
Enter useActionState and Server Actions in React, we can build a multi-step form building on the concept of accumulating some state within our reducer (server action)!
In our case, we can stash the formData value on our state so we can read back from it within components to re-fill the fields in the form after a submission.
You can test this out in this minimal demo app, the source for that app is available in this repo.
The gist boils down to both the server action:
type State = {
status: 'name' | 'email' | 'note' | 'error' | 'complete',
formData: FormData
};
async function incrementalSendAction(
prevState: State,
formData: FormData,
): Promise<State> {
and the usage of useActionState:
let [state, action] = useActionState(incrementalSendAction, initialState);From this - we can access the previous submitted formData via state.formData, allowing us to re-fill the inputs with the previous submitted value:
<Input
name="name"
// undefined on first render, filled in after first submission
defaultValue={state.formData.get('name')}
/>Now we get all the benefits:
The beauty of this also is that it's "Just React"™ and a minimal pattern built on top of the concepts we learned with Array.prototype.reduce!
👆Back to reference Although I'm sure that there is an existing name for this concept/pattern - if you know what it is called reach out and I'll update my blog post!
Matt Hamlin
@matthamlin.me
A quick look at a small but powerful pattern I've been leveraging as of late!
Loading...
Published: ....
Are we reinventing the wheel when it comes to onboarding new AI agents to a codebase, when we already have primitives available for onboarding humans?
Published: ....
Have you ever found the need to change the image you render on a web page based on the current preferred color scheme of your theme?
Published: ....
Have you ever wanted to create a class in JavaScript or TypeScript but also have the initialization be async? Here's a quick tip on a pattern that I've used in the past!
Loading comments...
Published: ....
I recently launched a rewrite and redesign of this personal website, I figured I'd talk a bit about the changes and new features that I added along the way!
Published: ....
A few thoughts on what to do after you launch a new project
Published: ....
A quick tip to implementing CSS theming that's compatible with Server Side Rendered applications!
Published: ....
Some rough thoughts on building a file-system routing based web application
Published: ....
This is a quick post noting that Next.js should now work with Deno v2!
Published: ....
Published: ....
Have you ever wanted to create a class in JavaScript or TypeScript but also have the initialization be async? Here's a quick tip on a pattern that I've used in the past!
Published: ....
A proposal for a minimal variant of TypeScript!
Published: ....
Have you ever wanted to create a class in JavaScript or TypeScript but also have the initialization be async? Here's a quick tip on a pattern that I've used in the past!
Published: ....
A quick tip outlining how to provide specific TypeScript type definitions for a local module!
Published: ....
A proposal for a minimal variant of TypeScript!
Published: ....
Feature toggles are often underused by most software development teams, and yet offer so much value during not only feature development but also refactors
Published: ....
A quick overview of the new lifecycle methods introduced in React 16.3
Published: ....
Have you ever found the need to change the image you render on a web page based on the current preferred color scheme of your theme?
Published: ....
A quick introduction to my new side project, hohoro. An incremental JS/TS library build tool!