Writing
Blog
Writing on system design, React, web performance, and the craft of building software.
Blog
React & Next.js
Advanced React: Patterns & Performance
Expand All
1
Chapter 1: Course Overview
2 articles
•
Not started
What This Advanced React Series Actually Covers
Part 1
•
5 min read
•
This series is the map I wish I had before building serious React apps. Layout, containers, forms, performance, and TypeScript all have a place here.
React File Naming Conventions: The Only Rule That Actually Matters
Part 2
•
3 min read
•
React has no official naming convention. PascalCase, camelCase, and kebab-case are all used in production codebases. Here's what I've seen work and why consistency beats everything else.
2
Chapter 2: Basic Components
3 articles
•
Not started
Layout Components and the Split Screen Pattern
Part 1
•
3 min read
•
I kept mixing layout CSS into content components until I saw why that kills reusability. Layout components fix this by owning the 'where', so content only owns the 'what'.
List and List Item Patterns in React
Part 2
•
4 min read
•
Six components, eight combinations, zero duplication. Here's how separating list containers from list items turns a maintenance headache into a composable system.
Building a Modal as a Layout Component
Part 3
•
3 min read
•
A modal is not a special case. It's a layout component with visibility state. Build one from scratch and discover why stopPropagation is the one line you cannot skip.
3
Chapter 3: Design Patterns
3 articles
•
Not started
What Are React Design Patterns (And Why They Are Not Gang of Four)
Part 1
•
3 min read
•
React design patterns are not the Singleton or Factory from your CS textbook. They emerged from specific React problems. Here's the map before we go deep.
Container Components: One Place for Data, Many Places to Display It
Part 2
•
3 min read
•
Every component that fetches its own data creates a duplication problem. Container components fix this by extracting data loading into a wrapper that passes results down automatically.
Generic Data Containers: Three Levels of Abstraction
Part 3
•
4 min read
•
A container hardcoded to one endpoint is a start. Remove assumptions one at a time and you end up with a DataSource that fetches from any source: API, localStorage, Redux, or a mock.
Advanced React: Patterns & Performance | Writing & Engineering | Durgesh Rai