export const metadata = { title: "React useEffect, StrictMode, and the Case of the Double Execution", description: "A tale of React.StrictMode, useEffect double-firing, and a fun way to fetch random activities from the Bored API.", openGraph: { title: "React useEffect, StrictMode, and the Case of the Double Execution", description: "A tale of React.StrictMode, useEffect double-firing, and a fun way to fetch random activities from the Bored API.", }, twitter: { card: "summary_large_image", title: "React useEffect, StrictMode, and the Case of the Double Execution", description: "A tale of React.StrictMode, useEffect double-firing, and a fun way to fetch random activities from the Bored API.", }, alternates: { canonical: "/p/last-nights-problem", }, }; import { P, H2, H3 } from "@/components/ui/typography"; import { PostLayout } from "@/app/components/Posts/PostLayout"; import { CustomLink } from "@/app/components/Posts/CustomComponents/CustomLink"; import { CustomImage as Image } from "@/app/components/Posts/CustomComponents/Image"; import { BoredActivity } from "./BoredActivity"; import { Answer } from "./Answer";

Introduction

Last night, I found myself in the middle of a timed coding assessment. You know the type: the clock is ticking, your heart is racing, and the questions are just a little more convoluted than you’d like. I came across a React problem that seemed simple—until it wasn’t. When you’re used to working with Apollo Client, or React Query, it’s easy to forget about some of the basic problems that tripped us up back when React 17 and 18 were first released. This post is about how I solved it, what tripped me up, and a fun way to make your next coding session a little less stressful.

The Problem: useEffect Runs Twice?

I was building a React component that needed to fetch some data on mount. Easy, right? Toss it in a useEffect and call it a day. But then, something odd happened: my effect was running twice! My API was getting hammered, and my state was updating in unexpected ways. If you’ve used React 18 with StrictMode, you might have seen this before.

What is React.StrictMode? It’s a development-only tool that helps you find potential problems in your React code. One of its features is intentionally double-invoking certain lifecycle methods and effects (like useEffect) to help surface bugs related to side effects, cleanup, and idempotency. This double invocation only happens in development, not in production. The idea is to make your components more robust and predictable by forcing you to handle effects and state updates carefully. It can be a little surprising and annoying if you’re not expecting it—especially under the pressure of a timed assessment!

How I Fixed It

The trick is to use a useRef as a flag to short-circuit your effect. Here’s the pattern I used:

```typescript const alreadyRan = React.useRef(false); useEffect(() => { if (alreadyRan.current) return; alreadyRan.current = true; // ...fetch or side effect here... }, []); ```

This ensures your effect only runs once, even in StrictMode. It’s a little hacky, but it works—and sometimes, that’s all you need to get through a timed assessment with your sanity intact.

Timed Assessments: A Comedy of Errors

Can we talk about timed coding assessments for a second? They’re stressful, unpredictable, and sometimes feel more like a test of your ability to debug under pressure than your actual coding skills. I get it—they’re meant to simulate real-world problem solving. But wouldn’t it be more fun if we could just fetch a random activity and do that instead?

Live Example: The Bored API

To lighten the mood, here’s a live example using the Bored API. Click the button to fetch a random activity. Who knows, maybe it’ll suggest something more fun than debugging useEffect!

Bonus: The Real Challenge with Paginated APIs

Here’s a twist that tripped me up: it’s not hard to create or consume a paginated API, and I could do that in my sleep. The real challenge is when you need to fetch all items from a paginated API—across every page—so you can filter and select the right element based on a specific query. In my actual assessment, I was working with a different API (not the Harry Potter API), but for this post, I’m using the Harry Potter API as an example. The key is looping through every page, collecting all the data, and only then applying your filter or selection logic. It’s a subtle but important distinction, and it’s what made this assessment question actually interesting.

Here’s a live example that fetches all the characters from every page, then finds and displays the oldest one with a magical clock badge:

```typescript export function Answer() { const [oldest, setOldest] = useState(null); const [randomImage, setRandomImage] = useState(""); const [loading, setLoading] = useState(false); const alreadyRan = useRef(false); async function fetchAllAndFindOldest(pageSize = 50) { let page = 1; let totalPages = 2; let oldestChar: Character | null = null; let allCharacters: Character[] = []; while (page <= totalPages) { const res = await fetch( `/api/hp-characters?page=${page}&pageSize=${pageSize}` ); const result: PaginatedResult = await res.json(); totalPages = result.totalPages; allCharacters = allCharacters.concat(result.data); for (const char of result.data) { if ( char.yearOfBirth && (!oldestChar || char.yearOfBirth < (oldestChar.yearOfBirth || Infinity)) ) { oldestChar = char; } } page++; } // If oldest has no image or blank image, pick a random image from another character if (!oldestChar || !oldestChar.image || oldestChar.image.trim() === "") { const withImages = allCharacters.filter( (c) => c.image && c.image.trim() !== "" ); if (withImages.length > 0) { setRandomImage( withImages[Math.floor(Math.random() * withImages.length)].image ); } else { setRandomImage(""); } } else { setRandomImage(""); } return oldestChar; } useEffect(() => { if (alreadyRan.current) return; alreadyRan.current = true; setLoading(true); fetchAllAndFindOldest().then((char) => { setOldest(char); setLoading(false); }); }, []); } ```

Conclusion

React.StrictMode is there to help, but it can trip you up if you’re not careful. Next time you’re in a timed assessment (or just coding for fun), remember the useRef trick—and don’t forget to take a break and do something fun. You’ve earned it!