--- title: "React Modernization" type: skill id: "wshobson-agents/code-quality/react-modernization" category: "Engineering" publisher: "Seth Hobson" license: "MIT" source: "https://github.com/wshobson/agents/tree/7e2fb55" canonical: "https://labs.pho.chat/en/skills/wshobson-agents/code-quality/react-modernization" open_in_pho: "https://pho.chat/customize?item=wshobson-agents%2Fcode-quality%2Freact-modernization&utm_source=labs&utm_medium=skill-page&utm_campaign=skills-library" --- # React Modernization Upgrade React applications to latest versions, migrate from class components to hooks, and adopt concurrent features. Use when modernizing React codebases, migrating to React Hooks, or upgrading to latest React versions. Source: Seth Hobson (MIT), copied at a pinned commit. Free to use. Part of the Phở Skills library (https://labs.pho.chat/en/skills). Skill set: Code quality and tooling (https://labs.pho.chat/en/skills/wshobson-agents/code-quality.md). ## What it covers - When to Use This Skill - Version Upgrade Path - React 16 → 17 → 18 - Class to Hooks Migration - State Management - Lifecycle Methods to Hooks - Context and HOCs to Hooks - React 18 Concurrent Features - New Root API - Automatic Batching - Transitions - Suspense for Data Fetching - Additional patterns and templates ## Other skills in this set - [Code Review Excellence](https://labs.pho.chat/en/skills/wshobson-agents/code-quality/code-review-excellence.md): Master effective code review practices to provide constructive feedback, catch bugs early, and foster knowledge sharing while maintaining team morale. Use when reviewing pull requests, establishing… - [Debugging Strategies](https://labs.pho.chat/en/skills/wshobson-agents/code-quality/debugging-strategies.md): Master systematic debugging techniques, profiling tools, and root cause analysis to efficiently track down bugs across any codebase or technology stack. Use when investigating bugs, performance… - [E2E Testing Patterns](https://labs.pho.chat/en/skills/wshobson-agents/code-quality/e2e-testing-patterns.md): Master end-to-end testing with Playwright and Cypress to build reliable test suites that catch bugs, improve confidence, and enable fast deployment. Use when implementing E2E tests, debugging flaky… - [Git Advanced Workflows](https://labs.pho.chat/en/skills/wshobson-agents/code-quality/git-advanced-workflows.md): Master advanced Git workflows including rebasing, cherry-picking, bisect, worktrees, and reflog to maintain clean history and recover from any situation. Use when managing complex Git histories… - [Monorepo Management](https://labs.pho.chat/en/skills/wshobson-agents/code-quality/monorepo-management.md): Master monorepo management with Turborepo, Nx, and pnpm workspaces to build efficient, scalable multi-package repositories with optimized builds and dependency management. Use when setting up… - [Nx Workspace Patterns](https://labs.pho.chat/en/skills/wshobson-agents/code-quality/nx-workspace-patterns.md): Configure and optimize Nx monorepo workspaces. Use when setting up Nx, configuring project boundaries, optimizing build caching, or implementing affected commands. - [Turborepo Caching](https://labs.pho.chat/en/skills/wshobson-agents/code-quality/turborepo-caching.md): Configure Turborepo for efficient monorepo builds with local and remote caching. Use when setting up Turborepo, optimizing build pipelines, or implementing distributed caching. - [Bazel Build Optimization](https://labs.pho.chat/en/skills/wshobson-agents/code-quality/bazel-build-optimization.md): Optimize Bazel builds for large-scale monorepos. Use when configuring Bazel, implementing remote execution, or optimizing build performance for enterprise codebases. - [Architecture Decision Records](https://labs.pho.chat/en/skills/wshobson-agents/code-quality/architecture-decision-records.md): Write and maintain Architecture Decision Records (ADRs) following best practices for technical decision documentation. Use when documenting significant technical decisions, reviewing past… - [Changelog Automation](https://labs.pho.chat/en/skills/wshobson-agents/code-quality/changelog-automation.md): Automate changelog generation from commits, PRs, and releases following Keep a Changelog format. Use when setting up release workflows, generating release notes, or standardizing commit conventions. - [OpenAPI Spec Generation](https://labs.pho.chat/en/skills/wshobson-agents/code-quality/openapi-spec-generation.md): Generate and maintain OpenAPI 3.1 specifications from code, design-first specs, and validation patterns. Use when creating API documentation, generating SDKs, or ensuring API contract compliance. - [Angular Migration](https://labs.pho.chat/en/skills/wshobson-agents/code-quality/angular-migration.md): Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning framework migrations, or… - [Dependency Upgrade](https://labs.pho.chat/en/skills/wshobson-agents/code-quality/dependency-upgrade.md): Manage major dependency version upgrades with compatibility analysis, staged rollout, and comprehensive testing. Use when upgrading framework versions, updating major dependencies, or managing… - [Bash Defensive Patterns](https://labs.pho.chat/en/skills/wshobson-agents/code-quality/bash-defensive-patterns.md): Master defensive Bash programming techniques for production-grade scripts. Use when writing robust shell scripts, CI/CD pipelines, or system utilities requiring fault tolerance and safety. - [Bats Testing Patterns](https://labs.pho.chat/en/skills/wshobson-agents/code-quality/bats-testing-patterns.md): Master Bash Automated Testing System (Bats) for comprehensive shell script testing. Use when writing tests for shell scripts, CI/CD pipelines, or requiring test-driven development of shell utilities. - [ShellCheck Configuration and Static Analysis](https://labs.pho.chat/en/skills/wshobson-agents/code-quality/shellcheck-configuration.md): Master ShellCheck static analysis configuration and usage for shell script quality. Use when setting up linting infrastructure, fixing code issues, or ensuring script portability. - [Before You Build](https://labs.pho.chat/en/skills/wshobson-agents/code-quality/before-you-build.md): Pre-build product and feature risk review for founders, product managers, and AI-assisted builders. Use this skill when the user is about to build a landing page, MVP, SaaS product, internal tool… ## Use it - In Phở: open https://pho.chat/customize?item=wshobson-agents%2Fcode-quality%2Freact-modernization&utm_source=labs&utm_medium=skill-page&utm_campaign=skills-library and press Try, or add it so Phở loads it whenever a request matches. Phở works with your own API key (OpenAI, Anthropic, Google and others). - Full instructions (original SKILL.md, unchanged): https://labs.pho.chat/skills/raw/wshobson-agents/code-quality/skills/react-modernization/SKILL.md - Original files: https://github.com/wshobson/agents/tree/7e2fb55 (MIT). - Full machine-readable index: https://labs.pho.chat/skills.json