Featured

react-modernization

Name: react-modernization
Rating: 5 (20990 reviews)
Author: wshobson

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.

TL;DR

Modernize React apps by upgrading versions, migrating to hooks, and adopting concurrent features.

What Is It

Upgrade React to latest versions
Migrate class components to hooks
Adopt concurrent React features
Use codemods for automated refactoring

Key Features

Automatic batching in React 18
Concurrent rendering with Suspense
Transitions for urgent/urgent updates
New root API (createRoot)
Effect cleanup in hooks
Improved performance with React 18+
Event delegation changes in React 17

How to Use

1.Upgrade to latest React version
2.Migrate class components to hooks using useState, useEffect, useContext
3.Apply codemods for automated refactoring
4.Use createRoot instead of ReactDOM.render
5.Leverage Suspense for data fetching
6.Use useTransition for non-urgent updates

Guardrails & Gotchas

No event pooling in React 17
Strict Mode double invocation in React 18
Use flushSync to force synchronous updates
Avoid blocking transitions with async updates

GitHub Stats

Author

@wshobson

Repository

wshobson/agents

Stars

20990

Explore More Skills

move-code-quality

@davila7

Analyzes Move language packages against the official Move Book Code Quality Checklist. Use this skill when reviewing Move code, checking Move 2024 Edition compliance, or analyzing Move packages for best practices. Activates automatically when working with .move files or Move.toml manifests.

12.4k

1.1k

1w ago

react-modernization

Explore More Skills

move-code-quality

e2e-testing-patterns

testing-anti-patterns