Initial commit

2025-11-29 18:39:35 +08:00
commit e95848b73e
12 changed files with 3947 additions and 0 deletions
--- a/skills/react-modernization/SKILL.md
+++ b/skills/react-modernization/SKILL.md
@@ -0,0 +1,513 @@
+---
+name: react-modernization
+description: 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.
+---
+
+# React Modernization
+
+Master React version upgrades, class to hooks migration, concurrent features adoption, and codemods for automated transformation.
+
+## When to Use This Skill
+
+- Upgrading React applications to latest versions
+- Migrating class components to functional components with hooks
+- Adopting concurrent React features (Suspense, transitions)
+- Applying codemods for automated refactoring
+- Modernizing state management patterns
+- Updating to TypeScript
+- Improving performance with React 18+ features
+
+## Version Upgrade Path
+
+### React 16 → 17 → 18
+
+**Breaking Changes by Version:**
+
+**React 17:**
+- Event delegation changes
+- No event pooling
+- Effect cleanup timing
+- JSX transform (no React import needed)
+
+**React 18:**
+- Automatic batching
+- Concurrent rendering
+- Strict Mode changes (double invocation)
+- New root API
+- Suspense on server
+
+## Class to Hooks Migration
+
+### State Management
+```javascript
+// Before: Class component
+class Counter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      count: 0,
+      name: ''
+    };
+  }
+
+  increment = () => {
+    this.setState({ count: this.state.count + 1 });
+  }
+
+  render() {
+    return (
+      <div>
+        <p>Count: {this.state.count}</p>
+        <button onClick={this.increment}>Increment</button>
+      </div>
+    );
+  }
+}
+
+// After: Functional component with hooks
+function Counter() {
+  const [count, setCount] = useState(0);
+  const [name, setName] = useState('');
+
+  const increment = () => {
+    setCount(count + 1);
+  };
+
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={increment}>Increment</button>
+    </div>
+  );
+}
+```
+
+### Lifecycle Methods to Hooks
+```javascript
+// Before: Lifecycle methods
+class DataFetcher extends React.Component {
+  state = { data: null, loading: true };
+
+  componentDidMount() {
+    this.fetchData();
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.id !== this.props.id) {
+      this.fetchData();
+    }
+  }
+
+  componentWillUnmount() {
+    this.cancelRequest();
+  }
+
+  fetchData = async () => {
+    const data = await fetch(`/api/${this.props.id}`);
+    this.setState({ data, loading: false });
+  };
+
+  cancelRequest = () => {
+    // Cleanup
+  };
+
+  render() {
+    if (this.state.loading) return <div>Loading...</div>;
+    return <div>{this.state.data}</div>;
+  }
+}
+
+// After: useEffect hook
+function DataFetcher({ id }) {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const fetchData = async () => {
+      try {
+        const response = await fetch(`/api/${id}`);
+        const result = await response.json();
+
+        if (!cancelled) {
+          setData(result);
+          setLoading(false);
+        }
+      } catch (error) {
+        if (!cancelled) {
+          console.error(error);
+        }
+      }
+    };
+
+    fetchData();
+
+    // Cleanup function
+    return () => {
+      cancelled = true;
+    };
+  }, [id]); // Re-run when id changes
+
+  if (loading) return <div>Loading...</div>;
+  return <div>{data}</div>;
+}
+```
+
+### Context and HOCs to Hooks
+```javascript
+// Before: Context consumer and HOC
+const ThemeContext = React.createContext();
+
+class ThemedButton extends React.Component {
+  static contextType = ThemeContext;
+
+  render() {
+    return (
+      <button style={{ background: this.context.theme }}>
+        {this.props.children}
+      </button>
+    );
+  }
+}
+
+// After: useContext hook
+function ThemedButton({ children }) {
+  const { theme } = useContext(ThemeContext);
+
+  return (
+    <button style={{ background: theme }}>
+      {children}
+    </button>
+  );
+}
+
+// Before: HOC for data fetching
+function withUser(Component) {
+  return class extends React.Component {
+    state = { user: null };
+
+    componentDidMount() {
+      fetchUser().then(user => this.setState({ user }));
+    }
+
+    render() {
+      return <Component {...this.props} user={this.state.user} />;
+    }
+  };
+}
+
+// After: Custom hook
+function useUser() {
+  const [user, setUser] = useState(null);
+
+  useEffect(() => {
+    fetchUser().then(setUser);
+  }, []);
+
+  return user;
+}
+
+function UserProfile() {
+  const user = useUser();
+  if (!user) return <div>Loading...</div>;
+  return <div>{user.name}</div>;
+}
+```
+
+## React 18 Concurrent Features
+
+### New Root API
+```javascript
+// Before: React 17
+import ReactDOM from 'react-dom';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
+// After: React 18
+import { createRoot } from 'react-dom/client';
+
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
+```
+
+### Automatic Batching
+```javascript
+// React 18: All updates are batched
+function handleClick() {
+  setCount(c => c + 1);
+  setFlag(f => !f);
+  // Only one re-render (batched)
+}
+
+// Even in async:
+setTimeout(() => {
+  setCount(c => c + 1);
+  setFlag(f => !f);
+  // Still batched in React 18!
+}, 1000);
+
+// Opt out if needed
+import { flushSync } from 'react-dom';
+
+flushSync(() => {
+  setCount(c => c + 1);
+});
+// Re-render happens here
+setFlag(f => !f);
+// Another re-render
+```
+
+### Transitions
+```javascript
+import { useState, useTransition } from 'react';
+
+function SearchResults() {
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState([]);
+  const [isPending, startTransition] = useTransition();
+
+  const handleChange = (e) => {
+    // Urgent: Update input immediately
+    setQuery(e.target.value);
+
+    // Non-urgent: Update results (can be interrupted)
+    startTransition(() => {
+      setResults(searchResults(e.target.value));
+    });
+  };
+
+  return (
+    <>
+      <input value={query} onChange={handleChange} />
+      {isPending && <Spinner />}
+      <Results data={results} />
+    </>
+  );
+}
+```
+
+### Suspense for Data Fetching
+```javascript
+import { Suspense } from 'react';
+
+// Resource-based data fetching (with React 18)
+const resource = fetchProfileData();
+
+function ProfilePage() {
+  return (
+    <Suspense fallback={<Loading />}>
+      <ProfileDetails />
+      <Suspense fallback={<Loading />}>
+        <ProfileTimeline />
+      </Suspense>
+    </Suspense>
+  );
+}
+
+function ProfileDetails() {
+  // This will suspend if data not ready
+  const user = resource.user.read();
+  return <h1>{user.name}</h1>;
+}
+
+function ProfileTimeline() {
+  const posts = resource.posts.read();
+  return <Timeline posts={posts} />;
+}
+```
+
+## Codemods for Automation
+
+### Run React Codemods
+```bash
+# Install jscodeshift
+npm install -g jscodeshift
+
+# React 16.9 codemod (rename unsafe lifecycle methods)
+npx react-codeshift <transform> <path>
+
+# Example: Rename UNSAFE_ methods
+npx react-codeshift --parser=tsx \
+  --transform=react-codeshift/transforms/rename-unsafe-lifecycles.js \
+  src/
+
+# Update to new JSX Transform (React 17+)
+npx react-codeshift --parser=tsx \
+  --transform=react-codeshift/transforms/new-jsx-transform.js \
+  src/
+
+# Class to Hooks (third-party)
+npx codemod react/hooks/convert-class-to-function src/
+```
+
+### Custom Codemod Example
+```javascript
+// custom-codemod.js
+module.exports = function(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  // Find setState calls
+  root.find(j.CallExpression, {
+    callee: {
+      type: 'MemberExpression',
+      property: { name: 'setState' }
+    }
+  }).forEach(path => {
+    // Transform to useState
+    // ... transformation logic
+  });
+
+  return root.toSource();
+};
+
+// Run: jscodeshift -t custom-codemod.js src/
+```
+
+## Performance Optimization
+
+### useMemo and useCallback
+```javascript
+function ExpensiveComponent({ items, filter }) {
+  // Memoize expensive calculation
+  const filteredItems = useMemo(() => {
+    return items.filter(item => item.category === filter);
+  }, [items, filter]);
+
+  // Memoize callback to prevent child re-renders
+  const handleClick = useCallback((id) => {
+    console.log('Clicked:', id);
+  }, []); // No dependencies, never changes
+
+  return (
+    <List items={filteredItems} onClick={handleClick} />
+  );
+}
+
+// Child component with memo
+const List = React.memo(({ items, onClick }) => {
+  return items.map(item => (
+    <Item key={item.id} item={item} onClick={onClick} />
+  ));
+});
+```
+
+### Code Splitting
+```javascript
+import { lazy, Suspense } from 'react';
+
+// Lazy load components
+const Dashboard = lazy(() => import('./Dashboard'));
+const Settings = lazy(() => import('./Settings'));
+
+function App() {
+  return (
+    <Suspense fallback={<Loading />}>
+      <Routes>
+        <Route path="/dashboard" element={<Dashboard />} />
+        <Route path="/settings" element={<Settings />} />
+      </Routes>
+    </Suspense>
+  );
+}
+```
+
+## TypeScript Migration
+
+```typescript
+// Before: JavaScript
+function Button({ onClick, children }) {
+  return <button onClick={onClick}>{children}</button>;
+}
+
+// After: TypeScript
+interface ButtonProps {
+  onClick: () => void;
+  children: React.ReactNode;
+}
+
+function Button({ onClick, children }: ButtonProps) {
+  return <button onClick={onClick}>{children}</button>;
+}
+
+// Generic components
+interface ListProps<T> {
+  items: T[];
+  renderItem: (item: T) => React.ReactNode;
+}
+
+function List<T>({ items, renderItem }: ListProps<T>) {
+  return <>{items.map(renderItem)}</>;
+}
+```
+
+## Migration Checklist
+
+```markdown
+### Pre-Migration
+- [ ] Update dependencies incrementally (not all at once)
+- [ ] Review breaking changes in release notes
+- [ ] Set up testing suite
+- [ ] Create feature branch
+
+### Class → Hooks Migration
+- [ ] Identify class components to migrate
+- [ ] Start with leaf components (no children)
+- [ ] Convert state to useState
+- [ ] Convert lifecycle to useEffect
+- [ ] Convert context to useContext
+- [ ] Extract custom hooks
+- [ ] Test thoroughly
+
+### React 18 Upgrade
+- [ ] Update to React 17 first (if needed)
+- [ ] Update react and react-dom to 18
+- [ ] Update @types/react if using TypeScript
+- [ ] Change to createRoot API
+- [ ] Test with StrictMode (double invocation)
+- [ ] Address concurrent rendering issues
+- [ ] Adopt Suspense/Transitions where beneficial
+
+### Performance
+- [ ] Identify performance bottlenecks
+- [ ] Add React.memo where appropriate
+- [ ] Use useMemo/useCallback for expensive operations
+- [ ] Implement code splitting
+- [ ] Optimize re-renders
+
+### Testing
+- [ ] Update test utilities (React Testing Library)
+- [ ] Test with React 18 features
+- [ ] Check for warnings in console
+- [ ] Performance testing
+```
+
+## Resources
+
+- **references/breaking-changes.md**: Version-specific breaking changes
+- **references/codemods.md**: Codemod usage guide
+- **references/hooks-migration.md**: Comprehensive hooks patterns
+- **references/concurrent-features.md**: React 18 concurrent features
+- **assets/codemod-config.json**: Codemod configurations
+- **assets/migration-checklist.md**: Step-by-step checklist
+- **scripts/apply-codemods.sh**: Automated codemod script
+
+## Best Practices
+
+1. **Incremental Migration**: Don't migrate everything at once
+2. **Test Thoroughly**: Comprehensive testing at each step
+3. **Use Codemods**: Automate repetitive transformations
+4. **Start Simple**: Begin with leaf components
+5. **Leverage StrictMode**: Catch issues early
+6. **Monitor Performance**: Measure before and after
+7. **Document Changes**: Keep migration log
+
+## Common Pitfalls
+
+- Forgetting useEffect dependencies
+- Over-using useMemo/useCallback
+- Not handling cleanup in useEffect
+- Mixing class and functional patterns
+- Ignoring StrictMode warnings
+- Breaking change assumptions