Skip to content

feat: [performance improvement] avoid flatmap in tags pages #340

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
anyulled wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: [performance improvement] avoid flatmap in tags pages #340

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0f59b23
feat: [performance improvement] avoid flatmap in tags pages
anyulled Jul 20, 2026
f6bad13
feat: [performance improvement] avoid flatmap in tags pages
anyulled Jul 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .jules/bolt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,8 @@

**Learning:** Using `Object.entries(obj).find(([key]) => key === target)` creates O(N) array allocations for the entries and traverses them linearly just to do a simple property lookup. This adds unnecessary memory allocation overhead and Garbage Collection.
**Action:** Use direct property lookup instead: `Object.prototype.hasOwnProperty.call(obj, target) ? obj[target as keyof typeof obj] : undefined`. This maintains O(1) performance while satisfying `security/detect-object-injection` linting rules.

## 2024-07-20 - Avoid chained flatMap().find() and flatMap().filter() on grouped data structures

**Learning:** When dealing with nested or grouped data structures (like `SessionGroup[]` where each group contains `Session[]`), chaining `.flatMap()` to flatten the arrays followed by `.find()` or `.filter()` causes the engine to allocate an entirely new flattened O(N) array in memory before performing the search. This introduces significant memory allocation overhead and multiple linear traversals.
**Action:** Instead of `flatMap().find()`, use nested loops or `groupedData.some(group => group.items.some(condition))` to allow for O(1) early bailout matching without pre-allocating a flattened array. For `.filter()`, use nested `.forEach()` loops and manually `.push()` matching items into a state array to perform the filtering in a single memory-efficient pass.

@gemini-code-assist gemini-code-assist Bot Jul 20, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Update the recommended action to suggest nested for...of loops instead of .some() or .forEach() with state objects/arrays, as for...of loops are cleaner, more idiomatic, and avoid closure allocation overhead.

43 changes: 34 additions & 9 deletions app/2026/tags/[tag]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import TalkCard from "@/components/layout/TalkCard";
import CTASection from "@/components/sections/CTASection";
import { getEditionConfig } from "@/config/editions";
import { getTagsFromTalk, getTalks } from "@/hooks/useTalks";
import { Talk } from "@/hooks/types";
import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
Expand Down Expand Up @@ -39,9 +40,21 @@ export async function generateMetadata({ params }: { params: Promise<{ tag: stri
const decodedTag = decodeURIComponent(tag);

const sessionGroups = await getTalks(year);
const allTalks = sessionGroups.flatMap((group) => group.sessions);
const displayTag =
allTalks.flatMap(getTagsFromTalk).find((t) => t.replaceAll(" ", "-").toLowerCase() === decodedTag.toLowerCase()) ?? decodedTag.replaceAll("-", " ");
const targetTagLower = decodedTag.toLowerCase();

const state = { matchedTag: undefined as string | undefined };
sessionGroups.some((group) =>
group.sessions.some((talk) => {
const found = getTagsFromTalk(talk).find((t) => t.replaceAll(" ", "-").toLowerCase() === targetTagLower);
if (found) {
state.matchedTag = found;
return true;
}
return false;
})
);
Comment on lines +45 to +55

@gemini-code-assist gemini-code-assist Bot Jul 20, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using nested for...of loops with a labeled break is cleaner and more idiomatic than using nested .some() calls with an external state object. It also avoids allocating closure functions on every iteration.

  let matchedTag: string | undefined;
  outer: for (const group of sessionGroups) {
    for (const talk of group.sessions) {
      const found = getTagsFromTalk(talk).find((t) => t.replaceAll(" ", "-").toLowerCase() === targetTagLower);
      if (found) {
        matchedTag = found;
        break outer;
      }
    }
  }


const displayTag = state.matchedTag ?? decodedTag.replaceAll("-", " ");

return {
title: `Talks tagged "${displayTag}" - DevBcn ${year}`,
Expand All @@ -56,17 +69,29 @@ export default async function Page({ params }: { params: Promise<{ tag: string }
const eventData = getEditionConfig(year);

const sessionGroups = await getTalks(year);
const allTalks = sessionGroups.flatMap((group) => group.sessions);

const displayTag =
allTalks.flatMap(getTagsFromTalk).find((t) => t.replaceAll(" ", "-").toLowerCase() === decodedTag.toLowerCase()) ?? decodedTag.replaceAll("-", " ");
const targetTagLower = decodedTag.toLowerCase();

const filteredTalks = allTalks.filter((talk) => {
const talkTags = getTagsFromTalk(talk);
const state = {
filteredTalks: [] as Talk[],
displayTag: undefined as string | undefined,
};

return talkTags.some((t) => t.replaceAll(" ", "-").toLowerCase() === decodedTag.toLowerCase());
sessionGroups.forEach((group) => {
group.sessions.forEach((talk) => {
const matchedTag = getTagsFromTalk(talk).find((t) => t.replaceAll(" ", "-").toLowerCase() === targetTagLower);
if (matchedTag) {
if (!state.displayTag) {
state.displayTag = matchedTag;
}
state.filteredTalks.push(talk);
}
});
});

const displayTag = state.displayTag ?? decodedTag.replaceAll("-", " ");
const filteredTalks = state.filteredTalks;
Comment on lines +75 to +93

@gemini-code-assist gemini-code-assist Bot Jul 20, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using nested for...of loops is cleaner and more performant than nested .forEach() calls. It avoids creating an intermediate state object and allocating closure functions for every group and session.

Suggested change
const state = {
filteredTalks: [] as Talk[],
displayTag: undefined as string | undefined,
};
return talkTags.some((t) => t.replaceAll(" ", "-").toLowerCase() === decodedTag.toLowerCase());
sessionGroups.forEach((group) => {
group.sessions.forEach((talk) => {
const matchedTag = getTagsFromTalk(talk).find((t) => t.replaceAll(" ", "-").toLowerCase() === targetTagLower);
if (matchedTag) {
if (!state.displayTag) {
state.displayTag = matchedTag;
}
state.filteredTalks.push(talk);
}
});
});
const displayTag = state.displayTag ?? decodedTag.replaceAll("-", " ");
const filteredTalks = state.filteredTalks;
const filteredTalks: Talk[] = [];
let matchedTag: string | undefined;
for (const group of sessionGroups) {
for (const talk of group.sessions) {
const found = getTagsFromTalk(talk).find((t) => t.replaceAll(" ", "-").toLowerCase() === targetTagLower);
if (found) {
if (!matchedTag) {
matchedTag = found;
}
filteredTalks.push(talk);
}
}
}
const displayTag = matchedTag ?? decodedTag.replaceAll("-", " ");


if (filteredTalks.length === 0) {
notFound();
}
Expand Down
43 changes: 34 additions & 9 deletions app/[year]/tags/[tag]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import TalkCard from "@/components/layout/TalkCard";
import CTASection from "@/components/sections/CTASection";
import { getArchivedEditions, getEditionConfig } from "@/config/editions";
import { getTagsFromTalk, getTalks } from "@/hooks/useTalks";
import { Talk } from "@/hooks/types";
import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
Expand Down Expand Up @@ -46,9 +47,21 @@ export async function generateMetadata({ params }: Readonly<TagPageProps>): Prom
const decodedTag = decodeURIComponent(tag);

const sessionGroups = await getTalks(year);
const allTalks = sessionGroups.flatMap((group) => group.sessions);
const displayTag =
allTalks.flatMap(getTagsFromTalk).find((t) => t.replaceAll(" ", "-").toLowerCase() === decodedTag.toLowerCase()) ?? decodedTag.replaceAll("-", " ");
const targetTagLower = decodedTag.toLowerCase();

const state = { matchedTag: undefined as string | undefined };
sessionGroups.some((group) =>
group.sessions.some((talk) => {
const found = getTagsFromTalk(talk).find((t) => t.replaceAll(" ", "-").toLowerCase() === targetTagLower);
if (found) {
state.matchedTag = found;
return true;
}
return false;
})
);
Comment on lines +52 to +62

@gemini-code-assist gemini-code-assist Bot Jul 20, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using nested for...of loops with a labeled break is cleaner and more idiomatic than using nested .some() calls with an external state object. It also avoids allocating closure functions on every iteration.

  let matchedTag: string | undefined;
  outer: for (const group of sessionGroups) {
    for (const talk of group.sessions) {
      const found = getTagsFromTalk(talk).find((t) => t.replaceAll(" ", "-").toLowerCase() === targetTagLower);
      if (found) {
        matchedTag = found;
        break outer;
      }
    }
  }


const displayTag = state.matchedTag ?? decodedTag.replaceAll("-", " ");

return {
title: `Talks tagged "${displayTag}" - DevBcn ${year}`,
Expand All @@ -62,17 +75,29 @@ export default async function TagPage({ params }: Readonly<TagPageProps>) {
const eventData = getEditionConfig(year);

const sessionGroups = await getTalks(year);
const allTalks = sessionGroups.flatMap((group) => group.sessions);

const displayTag =
allTalks.flatMap(getTagsFromTalk).find((t) => t.replaceAll(" ", "-").toLowerCase() === decodedTag.toLowerCase()) ?? decodedTag.replaceAll("-", " ");
const targetTagLower = decodedTag.toLowerCase();

const filteredTalks = allTalks.filter((talk) => {
const talkTags = getTagsFromTalk(talk);
const state = {
filteredTalks: [] as Talk[],
displayTag: undefined as string | undefined,
};

return talkTags.some((t) => t.replaceAll(" ", "-").toLowerCase() === decodedTag.toLowerCase());
sessionGroups.forEach((group) => {
group.sessions.forEach((talk) => {
const matchedTag = getTagsFromTalk(talk).find((t) => t.replaceAll(" ", "-").toLowerCase() === targetTagLower);
if (matchedTag) {
if (!state.displayTag) {
state.displayTag = matchedTag;
}
state.filteredTalks.push(talk);
}
});
});

const displayTag = state.displayTag ?? decodedTag.replaceAll("-", " ");
const filteredTalks = state.filteredTalks;
Comment on lines +81 to +99

@gemini-code-assist gemini-code-assist Bot Jul 20, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Using nested for...of loops is cleaner and more performant than nested .forEach() calls. It avoids creating an intermediate state object and allocating closure functions for every group and session.

Suggested change
const state = {
filteredTalks: [] as Talk[],
displayTag: undefined as string | undefined,
};
return talkTags.some((t) => t.replaceAll(" ", "-").toLowerCase() === decodedTag.toLowerCase());
sessionGroups.forEach((group) => {
group.sessions.forEach((talk) => {
const matchedTag = getTagsFromTalk(talk).find((t) => t.replaceAll(" ", "-").toLowerCase() === targetTagLower);
if (matchedTag) {
if (!state.displayTag) {
state.displayTag = matchedTag;
}
state.filteredTalks.push(talk);
}
});
});
const displayTag = state.displayTag ?? decodedTag.replaceAll("-", " ");
const filteredTalks = state.filteredTalks;
const filteredTalks: Talk[] = [];
let matchedTag: string | undefined;
for (const group of sessionGroups) {
for (const talk of group.sessions) {
const found = getTagsFromTalk(talk).find((t) => t.replaceAll(" ", "-").toLowerCase() === targetTagLower);
if (found) {
if (!matchedTag) {
matchedTag = found;
}
filteredTalks.push(talk);
}
}
}
const displayTag = matchedTag ?? decodedTag.replaceAll("-", " ");


if (filteredTalks.length === 0) {
notFound();
}
Expand Down
Loading