Daniel Saewitz

Abusing RSC's Cache For Blog Footnotes

stable pointerspublished March 2025

When implementing footnotes on this blog via React Server Components, I came across an interesting pattern that involves abusing the React cache function to mutate an object's properties.

For desktop screens, I like inline footnotes that show up in a sidebar. I implemented them via a simple component. Here's a rudimentary example1 with the mobile code removed:

Footnote.tsx
1import React from 'react';
2
3export interface Props {
4  index: number;
5  content: React.ReactNode;
6}
7
8const Footnote = ({ index, content }: Props) => {
9  return (
10    <>
11      <sup className="footnote-index">
12        {index}
13      </sup>
14
15      /* this shows up in the sidebar on desktop */
16      <span className="footnote-content hidden xl:flex">
17        <sup className="footnote-index">{index}</sup>
18        &nbsp; <span>{content}</span>
19      </span>
20    </>
21  );
22};
23
24export default Footnote;

But, annoyingly you then have to render it in your post with the index provided.

1  <Footnote index={1} content="First footnote" />
2  <Footnote index={2} content="Second footnote" />
3  <Footnote index={3} content="Third footnote" />

If you edit a post to insert an earlier footnote you have to go through the whole post and increment any that follow. That's frustrating. I wondered if it could be tracked automatically and attempted a few solutions. The best solve I found was mutating an object's keys inside of React's cache function.

So let's update our component to use React's cache function-which has a lifetime tied to the current request-to track of how many footnotes we have. We can then mutate state across a request's lifecycle, spanning the React rendering tree.

Footnote.tsx
1import React, { cache } from 'react';
2
3export interface Props {
4  content: React.ReactNode;
5}
6
7// object references are stable in javascript, but we can mutate its keys!
8const indexCount = cache(() => ({ index: 0 }));
9
10export const footnoteContent = cache(() => [] as (Props & { index: number })[]);
11
12const Footnote = ({ content }: Props) => {
13  const index = ++indexCount().index;
14
15  footnoteContent().push({ content, index });
16
17  return (
18    <>
19      <sup className="footnote-index">
20        {index}
21      </sup>
22
23      /* this shows up in the sidebar on desktop */
24      <span className="footnote-content hidden xl:flex">
25        <sup className="footnote-index">{index}</sup>
26        &nbsp; <span>{content}</span>
27      </span>
28    </>
29  );
30};
31
32export default Footnote;

Now we can render Footnote without the index and it dynamically generates the index for us:

1  <Footnote content="First footnote" />
2  <Footnote content="Second footnote" />
3  <Footnote content="Third footnote" />

We no longer have to keep track of what each footnote's index is - the cache function returns an object that is stable and we increment its index key in the render function.

Also, we can push our footnote content into an array2, to render a FootnoteFooter later if we choose to.

FootnotesFooter.tsx
1import { footnoteContent } from './Footnote'; // and access it later in the react tree!
2
3export default function FootnotesFooter() {
4  const content = footnoteContent();
5
6  if (content.length === 0) return null;
7
8  return (
9    <div className="xl:hidden">
10      {content.map((footnote) => (
11        <div key={footnote.index}>
12          <span className="footnote-index">{footnote.index}</span>. {footnote.content}
13        </div>
14      ))}
15    </div>
16  );
17}

The FootnoteFooter here is only visible to mobile users. If you're on desktop, make your browser smaller and you can see it.

Not only do we no longer have to keep track of which index each footnote is, but we can wrap up all of our footnotes up at the end of each post by using a second cache to track the footnote content.

Let me know if you use this pattern in other ways!

1. In reality, my footnote code is a tad more complex than this example
2. Arrays are objects in javascript