[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M70K1CWS2R9N4D2S1APNH9S5":3,"skill-same:01M70K1CWS2R9N4D2S1APNH9S5":75},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":31,"publishedAt":46,"linkOnly":47,"markdownContent":48,"markdownBody":49,"frontMatter":50,"refName":51,"commitSha":52,"skillDirectory":53,"forksCount":54,"repositoryHtmlUrl":55,"repositoryHomepageUrl":56,"ownerHtmlUrl":57,"ownerBlogUrl":58,"ownerDescription":59,"updatedAt":60,"install":61,"resources":74},"01M70K1CWS2R9N4D2S1APNH9S5","react-modernization",null,"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.","shengdabai\u002FTony-Claude-Code-Skills","shengdabai","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F116417419?v=4","01M70F6D2WY5PQV5A92BKYJQEW","Tony Sheng","01M70F6D3GAAAYZ5H4CC1G8VXM",3,"MIT","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002F_collections\u002Fwshobson-agents\u002Fplugins\u002Fframework-migration\u002Fskills\u002Freact-modernization\u002FSKILL.md",[18,23,26],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[32,33,34,35,36,37,38,39,40,41,42,43,44,45],"modernization","react","react modernization","hooks","upgrade","when","migrate","components","adopt","features","applications","react hooks","use","latest","2026-11-10 10:12:30",false,"---\nname: react-modernization\ndescription: 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.\n---\n\n# React Modernization\n\nMaster React version upgrades, class to hooks migration, concurrent features adoption, and codemods for automated transformation.\n\n## When to Use This Skill\n\n- Upgrading React applications to latest versions\n- Migrating class components to functional components with hooks\n- Adopting concurrent React features (Suspense, transitions)\n- Applying codemods for automated refactoring\n- Modernizing state management patterns\n- Updating to TypeScript\n- Improving performance with React 18+ features\n\n## Version Upgrade Path\n\n### React 16 → 17 → 18\n\n**Breaking Changes by Version:**\n\n**React 17:**\n- Event delegation changes\n- No event pooling\n- Effect cleanup timing\n- JSX transform (no React import needed)\n\n**React 18:**\n- Automatic batching\n- Concurrent rendering\n- Strict Mode changes (double invocation)\n- New root API\n- Suspense on server\n\n## Class to Hooks Migration\n\n### State Management\n```javascript\n\u002F\u002F Before: Class component\nclass Counter extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      count: 0,\n      name: ''\n    };\n  }\n\n  increment = () => {\n    this.setState({ count: this.state.count + 1 });\n  }\n\n  render() {\n    return (\n      \u003Cdiv>\n        \u003Cp>Count: {this.state.count}\u003C\u002Fp>\n        \u003Cbutton onClick={this.increment}>Increment\u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    );\n  }\n}\n\n\u002F\u002F After: Functional component with hooks\nfunction Counter() {\n  const [count, setCount] = useState(0);\n  const [name, setName] = useState('');\n\n  const increment = () => {\n    setCount(count + 1);\n  };\n\n  return (\n    \u003Cdiv>\n      \u003Cp>Count: {count}\u003C\u002Fp>\n      \u003Cbutton onClick={increment}>Increment\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n### Lifecycle Methods to Hooks\n```javascript\n\u002F\u002F Before: Lifecycle methods\nclass DataFetcher extends React.Component {\n  state = { data: null, loading: true };\n\n  componentDidMount() {\n    this.fetchData();\n  }\n\n  componentDidUpdate(prevProps) {\n    if (prevProps.id !== this.props.id) {\n      this.fetchData();\n    }\n  }\n\n  componentWillUnmount() {\n    this.cancelRequest();\n  }\n\n  fetchData = async () => {\n    const data = await fetch(`\u002Fapi\u002F${this.props.id}`);\n    this.setState({ data, loading: false });\n  };\n\n  cancelRequest = () => {\n    \u002F\u002F Cleanup\n  };\n\n  render() {\n    if (this.state.loading) return \u003Cdiv>Loading...\u003C\u002Fdiv>;\n    return \u003Cdiv>{this.state.data}\u003C\u002Fdiv>;\n  }\n}\n\n\u002F\u002F After: useEffect hook\nfunction DataFetcher({ id }) {\n  const [data, setData] = useState(null);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    let cancelled = false;\n\n    const fetchData = async () => {\n      try {\n        const response = await fetch(`\u002Fapi\u002F${id}`);\n        const result = await response.json();\n\n        if (!cancelled) {\n          setData(result);\n          setLoading(false);\n        }\n      } catch (error) {\n        if (!cancelled) {\n          console.error(error);\n        }\n      }\n    };\n\n    fetchData();\n\n    \u002F\u002F Cleanup function\n    return () => {\n      cancelled = true;\n    };\n  }, [id]); \u002F\u002F Re-run when id changes\n\n  if (loading) return \u003Cdiv>Loading...\u003C\u002Fdiv>;\n  return \u003Cdiv>{data}\u003C\u002Fdiv>;\n}\n```\n\n### Context and HOCs to Hooks\n```javascript\n\u002F\u002F Before: Context consumer and HOC\nconst ThemeContext = React.createContext();\n\nclass ThemedButton extends React.Component {\n  static contextType = ThemeContext;\n\n  render() {\n    return (\n      \u003Cbutton style={{ background: this.context.theme }}>\n        {this.props.children}\n      \u003C\u002Fbutton>\n    );\n  }\n}\n\n\u002F\u002F After: useContext hook\nfunction ThemedButton({ children }) {\n  const { theme } = useContext(ThemeContext);\n\n  return (\n    \u003Cbutton style={{ background: theme }}>\n      {children}\n    \u003C\u002Fbutton>\n  );\n}\n\n\u002F\u002F Before: HOC for data fetching\nfunction withUser(Component) {\n  return class extends React.Component {\n    state = { user: null };\n\n    componentDidMount() {\n      fetchUser().then(user => this.setState({ user }));\n    }\n\n    render() {\n      return \u003CComponent {...this.props} user={this.state.user} \u002F>;\n    }\n  };\n}\n\n\u002F\u002F After: Custom hook\nfunction useUser() {\n  const [user, setUser] = useState(null);\n\n  useEffect(() => {\n    fetchUser().then(setUser);\n  }, []);\n\n  return user;\n}\n\nfunction UserProfile() {\n  const user = useUser();\n  if (!user) return \u003Cdiv>Loading...\u003C\u002Fdiv>;\n  return \u003Cdiv>{user.name}\u003C\u002Fdiv>;\n}\n```\n\n## React 18 Concurrent Features\n\n### New Root API\n```javascript\n\u002F\u002F Before: React 17\nimport ReactDOM from 'react-dom';\n\nReactDOM.render(\u003CApp \u002F>, document.getElementById('root'));\n\n\u002F\u002F After: React 18\nimport { createRoot } from 'react-dom\u002Fclient';\n\nconst root = createRoot(document.getElementById('root'));\nroot.render(\u003CApp \u002F>);\n```\n\n### Automatic Batching\n```javascript\n\u002F\u002F React 18: All updates are batched\nfunction handleClick() {\n  setCount(c => c + 1);\n  setFlag(f => !f);\n  \u002F\u002F Only one re-render (batched)\n}\n\n\u002F\u002F Even in async:\nsetTimeout(() => {\n  setCount(c => c + 1);\n  setFlag(f => !f);\n  \u002F\u002F Still batched in React 18!\n}, 1000);\n\n\u002F\u002F Opt out if needed\nimport { flushSync } from 'react-dom';\n\nflushSync(() => {\n  setCount(c => c + 1);\n});\n\u002F\u002F Re-render happens here\nsetFlag(f => !f);\n\u002F\u002F Another re-render\n```\n\n### Transitions\n```javascript\nimport { useState, useTransition } from 'react';\n\nfunction SearchResults() {\n  const [query, setQuery] = useState('');\n  const [results, setResults] = useState([]);\n  const [isPending, startTransition] = useTransition();\n\n  const handleChange = (e) => {\n    \u002F\u002F Urgent: Update input immediately\n    setQuery(e.target.value);\n\n    \u002F\u002F Non-urgent: Update results (can be interrupted)\n    startTransition(() => {\n      setResults(searchResults(e.target.value));\n    });\n  };\n\n  return (\n    \u003C>\n      \u003Cinput value={query} onChange={handleChange} \u002F>\n      {isPending && \u003CSpinner \u002F>}\n      \u003CResults data={results} \u002F>\n    \u003C\u002F>\n  );\n}\n```\n\n### Suspense for Data Fetching\n```javascript\nimport { Suspense } from 'react';\n\n\u002F\u002F Resource-based data fetching (with React 18)\nconst resource = fetchProfileData();\n\nfunction ProfilePage() {\n  return (\n    \u003CSuspense fallback={\u003CLoading \u002F>}>\n      \u003CProfileDetails \u002F>\n      \u003CSuspense fallback={\u003CLoading \u002F>}>\n        \u003CProfileTimeline \u002F>\n      \u003C\u002FSuspense>\n    \u003C\u002FSuspense>\n  );\n}\n\nfunction ProfileDetails() {\n  \u002F\u002F This will suspend if data not ready\n  const user = resource.user.read();\n  return \u003Ch1>{user.name}\u003C\u002Fh1>;\n}\n\nfunction ProfileTimeline() {\n  const posts = resource.posts.read();\n  return \u003CTimeline posts={posts} \u002F>;\n}\n```\n\n## Codemods for Automation\n\n### Run React Codemods\n```bash\n# Install jscodeshift\nnpm install -g jscodeshift\n\n# React 16.9 codemod (rename unsafe lifecycle methods)\nnpx react-codeshift \u003Ctransform> \u003Cpath>\n\n# Example: Rename UNSAFE_ methods\nnpx react-codeshift --parser=tsx \\\n  --transform=react-codeshift\u002Ftransforms\u002Frename-unsafe-lifecycles.js \\\n  src\u002F\n\n# Update to new JSX Transform (React 17+)\nnpx react-codeshift --parser=tsx \\\n  --transform=react-codeshift\u002Ftransforms\u002Fnew-jsx-transform.js \\\n  src\u002F\n\n# Class to Hooks (third-party)\nnpx codemod react\u002Fhooks\u002Fconvert-class-to-function src\u002F\n```\n\n### Custom Codemod Example\n```javascript\n\u002F\u002F custom-codemod.js\nmodule.exports = function(file, api) {\n  const j = api.jscodeshift;\n  const root = j(file.source);\n\n  \u002F\u002F Find setState calls\n  root.find(j.CallExpression, {\n    callee: {\n      type: 'MemberExpression',\n      property: { name: 'setState' }\n    }\n  }).forEach(path => {\n    \u002F\u002F Transform to useState\n    \u002F\u002F ... transformation logic\n  });\n\n  return root.toSource();\n};\n\n\u002F\u002F Run: jscodeshift -t custom-codemod.js src\u002F\n```\n\n## Performance Optimization\n\n### useMemo and useCallback\n```javascript\nfunction ExpensiveComponent({ items, filter }) {\n  \u002F\u002F Memoize expensive calculation\n  const filteredItems = useMemo(() => {\n    return items.filter(item => item.category === filter);\n  }, [items, filter]);\n\n  \u002F\u002F Memoize callback to prevent child re-renders\n  const handleClick = useCallback((id) => {\n    console.log('Clicked:', id);\n  }, []); \u002F\u002F No dependencies, never changes\n\n  return (\n    \u003CList items={filteredItems} onClick={handleClick} \u002F>\n  );\n}\n\n\u002F\u002F Child component with memo\nconst List = React.memo(({ items, onClick }) => {\n  return items.map(item => (\n    \u003CItem key={item.id} item={item} onClick={onClick} \u002F>\n  ));\n});\n```\n\n### Code Splitting\n```javascript\nimport { lazy, Suspense } from 'react';\n\n\u002F\u002F Lazy load components\nconst Dashboard = lazy(() => import('.\u002FDashboard'));\nconst Settings = lazy(() => import('.\u002FSettings'));\n\nfunction App() {\n  return (\n    \u003CSuspense fallback={\u003CLoading \u002F>}>\n      \u003CRoutes>\n        \u003CRoute path=\"\u002Fdashboard\" element={\u003CDashboard \u002F>} \u002F>\n        \u003CRoute path=\"\u002Fsettings\" element={\u003CSettings \u002F>} \u002F>\n      \u003C\u002FRoutes>\n    \u003C\u002FSuspense>\n  );\n}\n```\n\n## TypeScript Migration\n\n```typescript\n\u002F\u002F Before: JavaScript\nfunction Button({ onClick, children }) {\n  return \u003Cbutton onClick={onClick}>{children}\u003C\u002Fbutton>;\n}\n\n\u002F\u002F After: TypeScript\ninterface ButtonProps {\n  onClick: () => void;\n  children: React.ReactNode;\n}\n\nfunction Button({ onClick, children }: ButtonProps) {\n  return \u003Cbutton onClick={onClick}>{children}\u003C\u002Fbutton>;\n}\n\n\u002F\u002F Generic components\ninterface ListProps\u003CT> {\n  items: T[];\n  renderItem: (item: T) => React.ReactNode;\n}\n\nfunction List\u003CT>({ items, renderItem }: ListProps\u003CT>) {\n  return \u003C>{items.map(renderItem)}\u003C\u002F>;\n}\n```\n\n## Migration Checklist\n\n```markdown\n### Pre-Migration\n- [ ] Update dependencies incrementally (not all at once)\n- [ ] Review breaking changes in release notes\n- [ ] Set up testing suite\n- [ ] Create feature branch\n\n### Class → Hooks Migration\n- [ ] Identify class components to migrate\n- [ ] Start with leaf components (no children)\n- [ ] Convert state to useState\n- [ ] Convert lifecycle to useEffect\n- [ ] Convert context to useContext\n- [ ] Extract custom hooks\n- [ ] Test thoroughly\n\n### React 18 Upgrade\n- [ ] Update to React 17 first (if needed)\n- [ ] Update react and react-dom to 18\n- [ ] Update @types\u002Freact if using TypeScript\n- [ ] Change to createRoot API\n- [ ] Test with StrictMode (double invocation)\n- [ ] Address concurrent rendering issues\n- [ ] Adopt Suspense\u002FTransitions where beneficial\n\n### Performance\n- [ ] Identify performance bottlenecks\n- [ ] Add React.memo where appropriate\n- [ ] Use useMemo\u002FuseCallback for expensive operations\n- [ ] Implement code splitting\n- [ ] Optimize re-renders\n\n### Testing\n- [ ] Update test utilities (React Testing Library)\n- [ ] Test with React 18 features\n- [ ] Check for warnings in console\n- [ ] Performance testing\n```\n\n## Resources\n\n- **references\u002Fbreaking-changes.md**: Version-specific breaking changes\n- **references\u002Fcodemods.md**: Codemod usage guide\n- **references\u002Fhooks-migration.md**: Comprehensive hooks patterns\n- **references\u002Fconcurrent-features.md**: React 18 concurrent features\n- **assets\u002Fcodemod-config.json**: Codemod configurations\n- **assets\u002Fmigration-checklist.md**: Step-by-step checklist\n- **scripts\u002Fapply-codemods.sh**: Automated codemod script\n\n## Best Practices\n\n1. **Incremental Migration**: Don't migrate everything at once\n2. **Test Thoroughly**: Comprehensive testing at each step\n3. **Use Codemods**: Automate repetitive transformations\n4. **Start Simple**: Begin with leaf components\n5. **Leverage StrictMode**: Catch issues early\n6. **Monitor Performance**: Measure before and after\n7. **Document Changes**: Keep migration log\n\n## Common Pitfalls\n\n- Forgetting useEffect dependencies\n- Over-using useMemo\u002FuseCallback\n- Not handling cleanup in useEffect\n- Mixing class and functional patterns\n- Ignoring StrictMode warnings\n- Breaking change assumptions\n","# React Modernization\n\nMaster React version upgrades, class to hooks migration, concurrent features adoption, and codemods for automated transformation.\n\n## When to Use This Skill\n\n- Upgrading React applications to latest versions\n- Migrating class components to functional components with hooks\n- Adopting concurrent React features (Suspense, transitions)\n- Applying codemods for automated refactoring\n- Modernizing state management patterns\n- Updating to TypeScript\n- Improving performance with React 18+ features\n\n## Version Upgrade Path\n\n### React 16 → 17 → 18\n\n**Breaking Changes by Version:**\n\n**React 17:**\n- Event delegation changes\n- No event pooling\n- Effect cleanup timing\n- JSX transform (no React import needed)\n\n**React 18:**\n- Automatic batching\n- Concurrent rendering\n- Strict Mode changes (double invocation)\n- New root API\n- Suspense on server\n\n## Class to Hooks Migration\n\n### State Management\n```javascript\n\u002F\u002F Before: Class component\nclass Counter extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      count: 0,\n      name: ''\n    };\n  }\n\n  increment = () => {\n    this.setState({ count: this.state.count + 1 });\n  }\n\n  render() {\n    return (\n      \u003Cdiv>\n        \u003Cp>Count: {this.state.count}\u003C\u002Fp>\n        \u003Cbutton onClick={this.increment}>Increment\u003C\u002Fbutton>\n      \u003C\u002Fdiv>\n    );\n  }\n}\n\n\u002F\u002F After: Functional component with hooks\nfunction Counter() {\n  const [count, setCount] = useState(0);\n  const [name, setName] = useState('');\n\n  const increment = () => {\n    setCount(count + 1);\n  };\n\n  return (\n    \u003Cdiv>\n      \u003Cp>Count: {count}\u003C\u002Fp>\n      \u003Cbutton onClick={increment}>Increment\u003C\u002Fbutton>\n    \u003C\u002Fdiv>\n  );\n}\n```\n\n### Lifecycle Methods to Hooks\n```javascript\n\u002F\u002F Before: Lifecycle methods\nclass DataFetcher extends React.Component {\n  state = { data: null, loading: true };\n\n  componentDidMount() {\n    this.fetchData();\n  }\n\n  componentDidUpdate(prevProps) {\n    if (prevProps.id !== this.props.id) {\n      this.fetchData();\n    }\n  }\n\n  componentWillUnmount() {\n    this.cancelRequest();\n  }\n\n  fetchData = async () => {\n    const data = await fetch(`\u002Fapi\u002F${this.props.id}`);\n    this.setState({ data, loading: false });\n  };\n\n  cancelRequest = () => {\n    \u002F\u002F Cleanup\n  };\n\n  render() {\n    if (this.state.loading) return \u003Cdiv>Loading...\u003C\u002Fdiv>;\n    return \u003Cdiv>{this.state.data}\u003C\u002Fdiv>;\n  }\n}\n\n\u002F\u002F After: useEffect hook\nfunction DataFetcher({ id }) {\n  const [data, setData] = useState(null);\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => {\n    let cancelled = false;\n\n    const fetchData = async () => {\n      try {\n        const response = await fetch(`\u002Fapi\u002F${id}`);\n        const result = await response.json();\n\n        if (!cancelled) {\n          setData(result);\n          setLoading(false);\n        }\n      } catch (error) {\n        if (!cancelled) {\n          console.error(error);\n        }\n      }\n    };\n\n    fetchData();\n\n    \u002F\u002F Cleanup function\n    return () => {\n      cancelled = true;\n    };\n  }, [id]); \u002F\u002F Re-run when id changes\n\n  if (loading) return \u003Cdiv>Loading...\u003C\u002Fdiv>;\n  return \u003Cdiv>{data}\u003C\u002Fdiv>;\n}\n```\n\n### Context and HOCs to Hooks\n```javascript\n\u002F\u002F Before: Context consumer and HOC\nconst ThemeContext = React.createContext();\n\nclass ThemedButton extends React.Component {\n  static contextType = ThemeContext;\n\n  render() {\n    return (\n      \u003Cbutton style={{ background: this.context.theme }}>\n        {this.props.children}\n      \u003C\u002Fbutton>\n    );\n  }\n}\n\n\u002F\u002F After: useContext hook\nfunction ThemedButton({ children }) {\n  const { theme } = useContext(ThemeContext);\n\n  return (\n    \u003Cbutton style={{ background: theme }}>\n      {children}\n    \u003C\u002Fbutton>\n  );\n}\n\n\u002F\u002F Before: HOC for data fetching\nfunction withUser(Component) {\n  return class extends React.Component {\n    state = { user: null };\n\n    componentDidMount() {\n      fetchUser().then(user => this.setState({ user }));\n    }\n\n    render() {\n      return \u003CComponent {...this.props} user={this.state.user} \u002F>;\n    }\n  };\n}\n\n\u002F\u002F After: Custom hook\nfunction useUser() {\n  const [user, setUser] = useState(null);\n\n  useEffect(() => {\n    fetchUser().then(setUser);\n  }, []);\n\n  return user;\n}\n\nfunction UserProfile() {\n  const user = useUser();\n  if (!user) return \u003Cdiv>Loading...\u003C\u002Fdiv>;\n  return \u003Cdiv>{user.name}\u003C\u002Fdiv>;\n}\n```\n\n## React 18 Concurrent Features\n\n### New Root API\n```javascript\n\u002F\u002F Before: React 17\nimport ReactDOM from 'react-dom';\n\nReactDOM.render(\u003CApp \u002F>, document.getElementById('root'));\n\n\u002F\u002F After: React 18\nimport { createRoot } from 'react-dom\u002Fclient';\n\nconst root = createRoot(document.getElementById('root'));\nroot.render(\u003CApp \u002F>);\n```\n\n### Automatic Batching\n```javascript\n\u002F\u002F React 18: All updates are batched\nfunction handleClick() {\n  setCount(c => c + 1);\n  setFlag(f => !f);\n  \u002F\u002F Only one re-render (batched)\n}\n\n\u002F\u002F Even in async:\nsetTimeout(() => {\n  setCount(c => c + 1);\n  setFlag(f => !f);\n  \u002F\u002F Still batched in React 18!\n}, 1000);\n\n\u002F\u002F Opt out if needed\nimport { flushSync } from 'react-dom';\n\nflushSync(() => {\n  setCount(c => c + 1);\n});\n\u002F\u002F Re-render happens here\nsetFlag(f => !f);\n\u002F\u002F Another re-render\n```\n\n### Transitions\n```javascript\nimport { useState, useTransition } from 'react';\n\nfunction SearchResults() {\n  const [query, setQuery] = useState('');\n  const [results, setResults] = useState([]);\n  const [isPending, startTransition] = useTransition();\n\n  const handleChange = (e) => {\n    \u002F\u002F Urgent: Update input immediately\n    setQuery(e.target.value);\n\n    \u002F\u002F Non-urgent: Update results (can be interrupted)\n    startTransition(() => {\n      setResults(searchResults(e.target.value));\n    });\n  };\n\n  return (\n    \u003C>\n      \u003Cinput value={query} onChange={handleChange} \u002F>\n      {isPending && \u003CSpinner \u002F>}\n      \u003CResults data={results} \u002F>\n    \u003C\u002F>\n  );\n}\n```\n\n### Suspense for Data Fetching\n```javascript\nimport { Suspense } from 'react';\n\n\u002F\u002F Resource-based data fetching (with React 18)\nconst resource = fetchProfileData();\n\nfunction ProfilePage() {\n  return (\n    \u003CSuspense fallback={\u003CLoading \u002F>}>\n      \u003CProfileDetails \u002F>\n      \u003CSuspense fallback={\u003CLoading \u002F>}>\n        \u003CProfileTimeline \u002F>\n      \u003C\u002FSuspense>\n    \u003C\u002FSuspense>\n  );\n}\n\nfunction ProfileDetails() {\n  \u002F\u002F This will suspend if data not ready\n  const user = resource.user.read();\n  return \u003Ch1>{user.name}\u003C\u002Fh1>;\n}\n\nfunction ProfileTimeline() {\n  const posts = resource.posts.read();\n  return \u003CTimeline posts={posts} \u002F>;\n}\n```\n\n## Codemods for Automation\n\n### Run React Codemods\n```bash\n# Install jscodeshift\nnpm install -g jscodeshift\n\n# React 16.9 codemod (rename unsafe lifecycle methods)\nnpx react-codeshift \u003Ctransform> \u003Cpath>\n\n# Example: Rename UNSAFE_ methods\nnpx react-codeshift --parser=tsx \\\n  --transform=react-codeshift\u002Ftransforms\u002Frename-unsafe-lifecycles.js \\\n  src\u002F\n\n# Update to new JSX Transform (React 17+)\nnpx react-codeshift --parser=tsx \\\n  --transform=react-codeshift\u002Ftransforms\u002Fnew-jsx-transform.js \\\n  src\u002F\n\n# Class to Hooks (third-party)\nnpx codemod react\u002Fhooks\u002Fconvert-class-to-function src\u002F\n```\n\n### Custom Codemod Example\n```javascript\n\u002F\u002F custom-codemod.js\nmodule.exports = function(file, api) {\n  const j = api.jscodeshift;\n  const root = j(file.source);\n\n  \u002F\u002F Find setState calls\n  root.find(j.CallExpression, {\n    callee: {\n      type: 'MemberExpression',\n      property: { name: 'setState' }\n    }\n  }).forEach(path => {\n    \u002F\u002F Transform to useState\n    \u002F\u002F ... transformation logic\n  });\n\n  return root.toSource();\n};\n\n\u002F\u002F Run: jscodeshift -t custom-codemod.js src\u002F\n```\n\n## Performance Optimization\n\n### useMemo and useCallback\n```javascript\nfunction ExpensiveComponent({ items, filter }) {\n  \u002F\u002F Memoize expensive calculation\n  const filteredItems = useMemo(() => {\n    return items.filter(item => item.category === filter);\n  }, [items, filter]);\n\n  \u002F\u002F Memoize callback to prevent child re-renders\n  const handleClick = useCallback((id) => {\n    console.log('Clicked:', id);\n  }, []); \u002F\u002F No dependencies, never changes\n\n  return (\n    \u003CList items={filteredItems} onClick={handleClick} \u002F>\n  );\n}\n\n\u002F\u002F Child component with memo\nconst List = React.memo(({ items, onClick }) => {\n  return items.map(item => (\n    \u003CItem key={item.id} item={item} onClick={onClick} \u002F>\n  ));\n});\n```\n\n### Code Splitting\n```javascript\nimport { lazy, Suspense } from 'react';\n\n\u002F\u002F Lazy load components\nconst Dashboard = lazy(() => import('.\u002FDashboard'));\nconst Settings = lazy(() => import('.\u002FSettings'));\n\nfunction App() {\n  return (\n    \u003CSuspense fallback={\u003CLoading \u002F>}>\n      \u003CRoutes>\n        \u003CRoute path=\"\u002Fdashboard\" element={\u003CDashboard \u002F>} \u002F>\n        \u003CRoute path=\"\u002Fsettings\" element={\u003CSettings \u002F>} \u002F>\n      \u003C\u002FRoutes>\n    \u003C\u002FSuspense>\n  );\n}\n```\n\n## TypeScript Migration\n\n```typescript\n\u002F\u002F Before: JavaScript\nfunction Button({ onClick, children }) {\n  return \u003Cbutton onClick={onClick}>{children}\u003C\u002Fbutton>;\n}\n\n\u002F\u002F After: TypeScript\ninterface ButtonProps {\n  onClick: () => void;\n  children: React.ReactNode;\n}\n\nfunction Button({ onClick, children }: ButtonProps) {\n  return \u003Cbutton onClick={onClick}>{children}\u003C\u002Fbutton>;\n}\n\n\u002F\u002F Generic components\ninterface ListProps\u003CT> {\n  items: T[];\n  renderItem: (item: T) => React.ReactNode;\n}\n\nfunction List\u003CT>({ items, renderItem }: ListProps\u003CT>) {\n  return \u003C>{items.map(renderItem)}\u003C\u002F>;\n}\n```\n\n## Migration Checklist\n\n```markdown\n### Pre-Migration\n- [ ] Update dependencies incrementally (not all at once)\n- [ ] Review breaking changes in release notes\n- [ ] Set up testing suite\n- [ ] Create feature branch\n\n### Class → Hooks Migration\n- [ ] Identify class components to migrate\n- [ ] Start with leaf components (no children)\n- [ ] Convert state to useState\n- [ ] Convert lifecycle to useEffect\n- [ ] Convert context to useContext\n- [ ] Extract custom hooks\n- [ ] Test thoroughly\n\n### React 18 Upgrade\n- [ ] Update to React 17 first (if needed)\n- [ ] Update react and react-dom to 18\n- [ ] Update @types\u002Freact if using TypeScript\n- [ ] Change to createRoot API\n- [ ] Test with StrictMode (double invocation)\n- [ ] Address concurrent rendering issues\n- [ ] Adopt Suspense\u002FTransitions where beneficial\n\n### Performance\n- [ ] Identify performance bottlenecks\n- [ ] Add React.memo where appropriate\n- [ ] Use useMemo\u002FuseCallback for expensive operations\n- [ ] Implement code splitting\n- [ ] Optimize re-renders\n\n### Testing\n- [ ] Update test utilities (React Testing Library)\n- [ ] Test with React 18 features\n- [ ] Check for warnings in console\n- [ ] Performance testing\n```\n\n## Resources\n\n- **references\u002Fbreaking-changes.md**: Version-specific breaking changes\n- **references\u002Fcodemods.md**: Codemod usage guide\n- **references\u002Fhooks-migration.md**: Comprehensive hooks patterns\n- **references\u002Fconcurrent-features.md**: React 18 concurrent features\n- **assets\u002Fcodemod-config.json**: Codemod configurations\n- **assets\u002Fmigration-checklist.md**: Step-by-step checklist\n- **scripts\u002Fapply-codemods.sh**: Automated codemod script\n\n## Best Practices\n\n1. **Incremental Migration**: Don't migrate everything at once\n2. **Test Thoroughly**: Comprehensive testing at each step\n3. **Use Codemods**: Automate repetitive transformations\n4. **Start Simple**: Begin with leaf components\n5. **Leverage StrictMode**: Catch issues early\n6. **Monitor Performance**: Measure before and after\n7. **Document Changes**: Keep migration log\n\n## Common Pitfalls\n\n- Forgetting useEffect dependencies\n- Over-using useMemo\u002FuseCallback\n- Not handling cleanup in useEffect\n- Mixing class and functional patterns\n- Ignoring StrictMode warnings\n- Breaking change assumptions\n",{"name":5,"description":7},"main","7850740bd837adb32f0a109ab2af82482196c6f2","skills\u002F_collections\u002Fwshobson-agents\u002Fplugins\u002Fframework-migration\u002Fskills\u002Freact-modernization",1,"https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills","https:\u002F\u002Fzturnsgo.com","https:\u002F\u002Fgithub.com\u002Fshengdabai","https:\u002F\u002Fzturnsgo.com\u002F","AI × education creator — producer, not consumer. Taught 6,000+ learners; shipping learning tools & daily essays with Claude Code, practicing @xiaolai's way 🥋","2026-11-01 21:28:23",{"source":8,"skillName":5,"commands":62,"prompt":72,"zipAvailable":73},[63,66,69],{"tool":64,"command":65},"npx","npx skills add shengdabai\u002FTony-Claude-Code-Skills --skill react-modernization",{"tool":67,"command":68},"bunx","bunx skills add shengdabai\u002FTony-Claude-Code-Skills --skill react-modernization",{"tool":70,"command":71},"pnpm","pnpm dlx skills add shengdabai\u002FTony-Claude-Code-Skills --skill react-modernization","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002F_collections\u002Fwshobson-agents\u002Fplugins\u002Fframework-migration\u002Fskills\u002Freact-modernization\u002FSKILL.md",true,[],[76,93,121,146,168,188],{"skillNo":77,"name":78,"nameZh":6,"description":79,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":80,"categories":81,"keywords":85,"publishedAt":46},"01M70P17DAD4C1C47NPH6A96EM","xiaolai-methodology","以李笑来(Li Xiaolai)的思考方式、方法论与表达风格,为用户做全方位 1-on-1 教练指导,覆盖创业、赚钱、投资、学习、自学、读书写作、用 AI、以及人生心态与自我管理。当用户提到 \"李笑来\"、\"笑来\"、\"笑来老师\"、\"扮演李笑来\"、\"找笑来聊聊\"、\"笑来怎么看\"、\"xiaolai\"、\"把时间当作朋友\"、\"通往财富自由之路\"、\"定投改变命运\"、\"韭菜的自我修养\"、\"自学是门手艺\"、\"让时间陪你慢慢变富\"、\"七年就是一辈子\"、\"元认知\"、\"活在未来\"、\"复利\u002F长期主义\"、\"践行\"、\"痴迷改进\"、\"个人商业模式\u002F出售时间\"、\"睡后收入\"、\"定投\"、\"财富自由\"、\"操作系统升级\"、\"最少必要知识\"、\"北极星提示词\"、\"用 AI 该怎么学\u002F思考\" 等任一触发词,或当用户带着关于创业\u002F赚钱\u002F投资\u002F学习\u002F职业\u002F重大人生决策的困惑、希望被人用笑来式的「逻辑 + 大白话 + 类比 + 重新定义 + 践行导向」来点醒和指导时,自动进入李笑来教练模式。","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fxiaolai-methodology\u002FSKILL.md",[82],{"categoryNo":83,"categoryName":84,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000018","写作与文案",[86,87,88,89,90,91,92],"methodology","xiaolai","xiaolai methodology","朋友","投资","writing","收入",{"skillNo":94,"name":95,"nameZh":6,"description":96,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":97,"categories":98,"keywords":101,"publishedAt":46},"01M70P13NB9YP7ACJR1S861CDS","zread","Produce and consume a wiki-style knowledge base for a code repository via the `zread` CLI and its on-disk output under `.\u002F.zread\u002Fwiki\u002F`. Use this skill whenever the user wants to understand, onboard onto, explore, summarize, map, or get an overview of an unfamiliar codebase; asks for architecture docs, a project wiki, a repo walkthrough, module\u002Fpackage explanations, or \"what does this repo do\"; wants to generate, regenerate, resume, browse, or serve code documentation locally; or mentions zread \u002F zread.ai directly. Also use it proactively before diving into a large unknown repo — if `.\u002F.zread\u002Fwiki\u002Fcurrent` exists, read the generated pages instead of crawling source file-by-file; if it doesn't, consider offering to run `zread generate`. The trigger is the intent (understand a codebase through generated docs), not the literal word \"zread\".","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fzread\u002FSKILL.md",[99,100],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},[95,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120],"knowledge","wiki","explore","walkthrough","project","get","knowledge base","run","generate","intent","cli","map","documentation","project wiki","disk","architecture","code","unknown","generated",{"skillNo":122,"name":123,"nameZh":6,"description":124,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":125,"categories":126,"keywords":131,"publishedAt":46},"01M70P10S4SWMZQ8BJAFBFDRW3","youtube","Launch the YouTube Creator Agent to auto-generate videos.\nUse when: user types \u002Fyoutube, wants to create YouTube videos,\ngenerate video content, or upload to YouTube.\nKeywords: youtube, video, 视频, 创作视频, 发布视频","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube\u002FSKILL.md",[127,128],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":129,"categoryName":130,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000036","内容创作者",[123,132,133,134,135,136,137,138,110,139,140,141,37,44,142,143,144,145],"user","content","视频","creator","generate video","videos","launch","video content","create","upload","auto","types","Video","创作",{"skillNo":147,"name":148,"nameZh":6,"description":149,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":150,"categories":151,"keywords":153,"publishedAt":46},"01M70P0YE95D8BACZCGV8BK90K","youtube-script-sync","Sync, update, or optimize Tony's GetNote knowledge base `Youtube视频逐字稿` by turning each parent recording or first-person idea note into an idempotent child note containing a directly recordable YouTube long-video or Shorts script. Use when the user says “更新\u002F同步\u002F优化 Youtube视频逐字稿知识库”, or says “更新\u002F同步\u002F优化该知识库” while this knowledge base is the active context.","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fyoutube-script-sync\u002FSKILL.md",[152],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[154,155,123,156,157,144,158,159,160,161,162,163,164,165,108,166,37,44,102,167],"sync","script","youtube script sync","recording","shorts","first","base","person","update","active","child","optimize","idempotent","long",{"skillNo":169,"name":170,"nameZh":6,"description":171,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":172,"categories":173,"keywords":178,"publishedAt":46},"01M70P0WMV5XT0EEC0N445PW07","writing-skills","How to write SKILL.md files that trigger reliably and teach effectively. Use when creating, improving, or reviewing Claude Code skills.","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fxiaolai\u002Fnlpm\u002Fskills\u002Fnlpm\u002Fwriting-skills\u002FSKILL.md",[174,175,176,177],{"categoryNo":83,"categoryName":84,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},{"categoryNo":129,"categoryName":130,"taxonomyType":29,"taxonomyTypeDesc":30},[179,91,180,181,182,183,118,37,44,184,185,186,187],"writing skills","how","teach","write skill","write","claude code skills","files","how to","trigger",{"skillNo":189,"name":190,"nameZh":6,"description":191,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":192,"categories":193,"keywords":196,"publishedAt":46},"01M70P0SJFR4YVJQBGMHKGSKXT","writing-rules","How to write .claude\u002Frules\u002F files that Claude actually follows. Use when creating, improving, or reviewing project rules.","https:\u002F\u002Fgithub.com\u002Fshengdabai\u002FTony-Claude-Code-Skills\u002Fblob\u002Fmain\u002Fskills\u002Fxiaolai\u002Fnlpm\u002Fskills\u002Fnlpm\u002Fwriting-rules\u002FSKILL.md",[194,195],{"categoryNo":83,"categoryName":84,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":129,"categoryName":130,"taxonomyType":29,"taxonomyTypeDesc":30},[197,91,198,106,199,185,37,180,183,44,186],"Rules","writing rules","project rules"]