Modern React modernization¶
Modernization is a sequence of verified boundaries, not a rewrite checkbox.
Priorities¶
- Move to strict TypeScript and a supported toolchain.
- Replace class lifecycle coupling with cohesive components and explicit effects.
- Move state to its narrowest owner; introduce reducers for related transitions.
- Route and split code by user workflow.
- Replace implementation tests with behavior-focused tests.
- Profile before adding memoization.
Migration traps¶
- Translating lifecycle methods one-for-one into effects.
- Storing values that can be derived during render.
- Putting all state into one global Context.
- Treating concurrent rendering as an ordering guarantee.
- Migrating build tools without validating production base paths and caching.
Use characterization tests and small vertical slices to preserve observable behavior while changing internals.