A simple React app that renders a large list of fake products with dark mode, item selection, and a live counter.
A practice project for building a performant React UI with a large dataset. The main goal was to learn how to:
- Use
React.memoto prevent unnecessary re-renders of child components - Use
useMemoto memoize derived style objects so they're not recreated on every render - Pass callback props correctly to memoized components
- Simulate expensive renders with a synchronous
sleeputility to make optimizations observable - Generate realistic fake data with Faker.js
- Toggle dark mode via state and apply dynamic inline styles
- Clone or download this repository.
- Install dependencies:
npm install - Start the development server:
npm run dev - Open the URL shown in your terminal (usually
http://localhost:5173).
npm run dev // Starts the project so I can see changes live.
npm run build // Prepares the project for the real world (deployment).
npm run preview // Lets me check the build version locally.
- Node.js (v18 or higher recommended)
- A text editor
- Basic familiarity with React
| No | File Name | What it does |
|---|---|---|
| 1 | index.html |
Entry HTML file — mounts the React root |
| 2 | index.jsx |
Root component — holds state for counter, dark mode, and selected product |
| 3 | Product.jsx |
Memoized product card component |
| 4 | data.js |
Generates 300 fake products using Faker.js |
| 5 | utils.js |
Contains a synchronous sleep helper to simulate slow renders |
| 6 | style.css |
Global styles for the layout and components |
The app renders 300 product cards generated with Faker.js. Each card is wrapped in React.memo so it only re-renders when its own props change. The parent computes a shared productStyles object with useMemo, keyed on the darkMode flag, so a dark/light toggle doesn't cause all 300 cards to recompute their styles unnecessarily. Clicking a card highlights it by merging a selectedStyles override on top of the shared style object.
- Found a bug? Open an issue and I'll try to fix it.
- Advice? If you have ideas for improving the performance patterns or expanding the product UI, let me know!
Keep changes focused — one feature or fix per pull request. Make sure npm run build passes before submitting.
Feel free to use this for your own practice! MIT License.