Frontend35-60 min
React Reconciliation and Stable Keys
Use stable keys, avoid index keys for changing lists, split expensive children, and profile reconciliation cost.
ReactReact DevToolsTypeScript
Prerequisites
- A React list, table, or repeated card UI.
- Items have stable IDs or can be assigned stable IDs.
- A visible bug or performance issue during list updates.
1
Plan the implementation
Start by choosing the exact page, route, API, or deployment surface you want to improve. A narrow target makes the implementation measurable and easier to verify.
- Write down the current behavior and the user-facing problem it creates.
- Pick one measurable success signal such as bundle size, latency, error rate, security coverage, or UI responsiveness.
- Identify the files, routes, providers, and environment variables involved.
- Create a rollback note before changing production-sensitive configuration.
2
Set up the required tools
Install or configure only the tools needed for this implementation. Keep config close to the feature so future developers can find the moving parts quickly.
Implementation snippet
npm run dev
# Record list updates in React DevTools Profiler.Checklist
- Dependencies are added to the correct workspace package.
- Environment variables are documented in `.env.example` when needed.
- Local development still starts without production-only secrets.
- The change is small enough to review in one pull request.
3
Implement the core pattern
- Replace array index keys with stable IDs for lists that can change.
- Move expensive per-row calculations out of render or memoize them after profiling.
- Split large list items into smaller components only when it reduces rerender cost.
- Keep props stable for memoized children.
- Profile list update interactions after the fix.
Implementation snippet
{items.map((item) => (
<ProjectRow key={item.id} project={item} />
))}
// Avoid `key={index}` when users can sort, insert, remove, or filter rows.4
Handle edge cases
Checklist
- Sorting and filtering do not preserve the wrong input state in rows.
- Rows are keyed by stable business IDs.
- Large lists are considered for virtualization.
- Profiler shows fewer unnecessary rerenders.
5
Verify before production
- Run the app locally and test the normal success path.
- Test one failure path, one empty state, and one slow-network or retry path.
- Run the project build and any related unit or integration tests.
- Check browser console, server logs, and network responses for hidden warnings.
- Document the final behavior, commands used, and any follow-up work.