react-modernization Skill for Claude: Upgrade React and Move to Hooks

• Lists breaking changes for React 17 and 18

  Names what changes in each step: event delegation and effect cleanup timing in 17, then automatic batching, concurrent rendering, Strict Mode double invocation and the new root API in 18.

  Try: “Upgrade this app from React 17 to 18 and list what will break.”

  Version upgrade path

• Before and after examples for state, lifecycle, context and HOCs

  Shows how this.state becomes useState, lifecycle methods become useEffect, contextType becomes useContext and a data-fetching HOC becomes a custom hook.

  Try: “Convert this class component to a function component with hooks.”

  Class to hooks migration

• New createRoot API and automatic batching examples

  Shows ReactDOM.render replaced by createRoot, and how updates are batched even inside timers, with flushSync as the opt-out.

  React 18 concurrent features

• npx jscodeshift and npx codemod commands in references/details.md

  Lists commands that run react-codemod transforms on src/, including a TypeScript variant, a dry run with --dry --print, and a class-to-hooks codemod. A custom codemod example is included.

  Try: “Run the update-react-imports codemod as a dry run first.”

  Runs code · Codemods

• useMemo, useCallback, React.memo, code splitting and typing components

  Gives patterns for memoization and lazy loading plus a TypeScript migration section with generic component props.

  Performance and TypeScript

• Pre-migration, hooks, React 18, performance and testing checklists

  Ends with checklists, such as updating dependencies step by step, starting with leaf components and testing under StrictMode.

  Migration checklist

Watch out for

• Codemods run third-party code on your source

  The guide runs npx jscodeshift with transforms from raw.githubusercontent.com/reactjs/react-codemod and npx codemod react/hooks/convert-class-to-function. Run them on a clean branch, read the transform first, and review the diff. github.com

• Dry run is shown for one transform only

  The guide shows --dry --print for rename-unsafe-lifecycles. Add the same flags to the others when you want a preview before any change. github.com