Master React version upgrades, class to hooks migration, concurrent features adoption, and codemods for automated transformation.
\nBreaking Changes by Version:
\nReact 17:
\nReact 18:
\n// 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 <div>\n <p>Count: {this.state.count}</p>\n <button onClick={this.increment}>Increment</button>\n </div>\n );\n }\n}\n\n// 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 <div>\n <p>Count: {count}</p>\n <button onClick={increment}>Increment</button>\n </div>\n );\n}\n// 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(`/api/${this.props.id}`);\n this.setState({ data, loading: false });\n };\n\n cancelRequest = () => {\n // Cleanup\n };\n\n render() {\n if (this.state.loading) return <div>Loading...</div>;\n return <div>{this.state.data}</div>;\n }\n}\n\n// 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(`/api/${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 // Cleanup function\n return () => {\n cancelled = true;\n };\n }, [id]); // Re-run when id changes\n\n if (loading) return <div>Loading...</div>;\n return <div>{data}</div>;\n}\n// 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 <button style={{ background: this.context.theme }}>\n {this.props.children}\n </button>\n );\n }\n}\n\n// After: useContext hook\nfunction ThemedButton({ children }) {\n const { theme } = useContext(ThemeContext);\n\n return <button style={{ background: theme }}>{children}</button>;\n}\n\n// 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 <Component {...this.props} user={this.state.user} />;\n }\n };\n}\n\n// 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 <div>Loading...</div>;\n return <div>{user.name}</div>;\n}\n// Before: React 17\nimport ReactDOM from \"react-dom\";\n\nReactDOM.render(<App />, document.getElementById(\"root\"));\n\n// After: React 18\nimport { createRoot } from \"react-dom/client\";\n\nconst root = createRoot(document.getElementById(\"root\"));\nroot.render(<App />);\n// React 18: All updates are batched\nfunction handleClick() {\n setCount((c) => c + 1);\n setFlag((f) => !f);\n // Only one re-render (batched)\n}\n\n// Even in async:\nsetTimeout(() => {\n setCount((c) => c + 1);\n setFlag((f) => !f);\n // Still batched in React 18!\n}, 1000);\n\n// Opt out if needed\nimport { flushSync } from \"react-dom\";\n\nflushSync(() => {\n setCount((c) => c + 1);\n});\n// Re-render happens here\nsetFlag((f) => !f);\n// Another re-render\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 // Urgent: Update input immediately\n setQuery(e.target.value);\n\n // Non-urgent: Update results (can be interrupted)\n startTransition(() => {\n setResults(searchResults(e.target.value));\n });\n };\n\n return (\n <>\n <input value={query} onChange={handleChange} />\n {isPending && <Spinner />}\n <Results data={results} />\n </>\n );\n}\nimport { Suspense } from \"react\";\n\n// Resource-based data fetching (with React 18)\nconst resource = fetchProfileData();\n\nfunction ProfilePage() {\n return (\n <Suspense fallback={<Loading />}>\n <ProfileDetails />\n <Suspense fallback={<Loading />}>\n <ProfileTimeline />\n </Suspense>\n </Suspense>\n );\n}\n\nfunction ProfileDetails() {\n // This will suspend if data not ready\n const user = resource.user.read();\n return <h1>{user.name}</h1>;\n}\n\nfunction ProfileTimeline() {\n const posts = resource.posts.read();\n return <Timeline posts={posts} />;\n}\nMore detailed templates and worked examples live in references/details.md. Read that file for the full pattern library.