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!
// First path, maintaining the bookkeeping separate from the reduce:
let seen = new Set();
let reducedFruits = fruits.reduce((acc, fruit) => {
if (!seen.has(fruit)) {
seen.add(fruit);
acc.push(fruit);
}
return acc;
}, []);
}
// Second path - bake in the bookkeeping
// __within__ the reduce accumulator!
let reducedFruits =
// Note: We need to grab the value we care about from the reduce call
fruits.reduce(
(acc, fruit) => {
if (!acc.seen.has(fruit)) {
acc.seen.add(fruit);
acc.fruits.push(fruit);
}
return acc;
},
// Note: Our default accumulator changed shape!
{
fruits: [],
seen: new Set(),
},
).fruits;
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.
The Bookkeeping Pattern - aka how to build progressively enhanced (multi-step) forms with React Server Components and server actions (with @nextjs.org), using patterns from `reduce`!
