Skip to content

⚡ Optimize Navbar rendering by memoizing derived collection data #63

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
AJFrio wants to merge 1 commit into
base: main
Choose a base branch
from
Open

⚡ Optimize Navbar rendering by memoizing derived collection data #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
22 changes: 22 additions & 0 deletions benchmark.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React, { useMemo, useState } from 'react';
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot Mar 6, 2026

Choose a reason for hiding this comment

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

P2 Badge Remove lint-failing unused symbols in benchmarks

This new benchmark file introduces unused imports (useMemo, useState) and an unused local result, which violates the repo’s no-unused-vars rule for **/*.{js,jsx} and causes lint failures (the same pattern appears in benchmark2.js and benchmark3.js). As committed, these added scripts break standard lint runs.

Useful? React with 👍 / 👎.


// A synthetic version of the work we want to measure
function runBenchmark() {
const collectionCount = 100;
const productCount = 1000;
const iterations = 10000;

const collectionsData = Array.from({ length: collectionCount }, (_, i) => ({ id: `col-${i}`, name: `Collection ${i}` }));
const productsData = Array.from({ length: productCount }, (_, i) => ({ id: `prod-${i}`, name: `Product ${i}`, collectionId: `col-${i % collectionCount}` }));

console.time('baseline');
for (let i = 0; i < iterations; i++) {
const collectionsWithProducts = collectionsData.map(collection => ({
...collection,
products: productsData.filter(product => product.collectionId === collection.id)
}));
}
console.timeEnd('baseline');
}

runBenchmark();
30 changes: 30 additions & 0 deletions benchmark2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React, { useMemo, useState } from 'react';

// A synthetic version of the work we want to measure
function runBenchmark() {
const collectionCount = 100;
const productCount = 1000;
const iterations = 10000;

const collectionsData = Array.from({ length: collectionCount }, (_, i) => ({ id: `col-${i}`, name: `Collection ${i}` }));
const productsData = Array.from({ length: productCount }, (_, i) => ({ id: `prod-${i}`, name: `Product ${i}`, collectionId: `col-${i % collectionCount}` }));

console.time('optimized');
for (let i = 0; i < iterations; i++) {
const productsByCollection = productsData.reduce((acc, product) => {
if (!acc[product.collectionId]) {
acc[product.collectionId] = [];
}
acc[product.collectionId].push(product);
return acc;
}, {});

const collectionsWithProducts = collectionsData.map(collection => ({
...collection,
products: productsByCollection[collection.id] || []
}));
}
console.timeEnd('optimized');
}

runBenchmark();
32 changes: 32 additions & 0 deletions benchmark3.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React, { useMemo, useState } from 'react';

// A synthetic version of the work we want to measure
function runBenchmark() {
const collectionCount = 100;
const productCount = 1000;
const iterations = 10000;

const collectionsData = Array.from({ length: collectionCount }, (_, i) => ({ id: `col-${i}`, name: `Collection ${i}` }));
const productsData = Array.from({ length: productCount }, (_, i) => ({ id: `prod-${i}`, name: `Product ${i}`, collectionId: `col-${i % collectionCount}` }));

console.time('optimized Map');
for (let i = 0; i < iterations; i++) {
const productsByCollection = new Map();
for (const product of productsData) {
const collectionProducts = productsByCollection.get(product.collectionId);
if (collectionProducts) {
collectionProducts.push(product);
} else {
productsByCollection.set(product.collectionId, [product]);
}
}

const collectionsWithProducts = collectionsData.map(collection => ({
...collection,
products: productsByCollection.get(collection.id) || []
}));
}
console.timeEnd('optimized Map');
}

runBenchmark();
30 changes: 0 additions & 30 deletions dist/asset-manifest.json
View file
Open in desktop

This file was deleted.

482 changes: 0 additions & 482 deletions dist/assets/index-BYJaIYQ8.js
View file
Open in desktop

This file was deleted.

2 changes: 1 addition & 1 deletion dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/cart.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>OpenShop</title>
<script type="module" crossorigin src="/assets/index-BYJaIYQ8.js"></script>
<script type="module" crossorigin src="/assets/index-ENYPUJjh.js"></script>
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector Bot Mar 6, 2026

Choose a reason for hiding this comment

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

P1 Badge Include referenced dist JS bundle

dist/index.html now points to /assets/index-ENYPUJjh.js, but this commit does not add that file to dist/assets (and removes the previously tracked bundle), so the checked-in dist/ snapshot cannot boot the app because the entry script 404s. This breaks any workflow that serves repository dist contents directly without a rebuild step.

Useful? React with 👍 / 👎.

<link rel="stylesheet" crossorigin href="/assets/index-q4lwPvEs.css">
</head>
<body>
Expand Down
Loading