Comparing
Create your next immutable state by mutating the current one
Declarative client-side routing for React — maps URLs to components with nested routes, loaders, and actions.
| Metric | immer | react-router |
|---|---|---|
| Ecosystem | npm | npm |
| Difficulty | Beginner ✓ | Intermediate |
| Weekly downloads | 41.7M↑ | 11.0M |
| Latest version | v11.1.4 | v7.1.1 |
| Recipes | 1 | 3↑ |
immer only
Shared
react-router only
Use Immer whenever you have deeply nested state updates that are painful to write immutably: Redux reducers, Zustand's set function, or React useState with complex objects. It's built into Redux Toolkit's createSlice, so you're probably already using it.
Any React SPA needing URL-based navigation, nested layouts (dashboard sidebar + content), data loading tied to routes, form actions, protected routes.
For flat, simple state (a counter, a boolean toggle), immer's overhead isn't worth it — just spread the object. Immer also has edge cases with classes, Maps, and Sets that require using enableMapSet() and enableAllPlugins().
Next.js (use its file-based router). Remix (built on React Router but adds SSR). Very simple apps with only one or two views — a state variable suffices.
immer
react-router