react-modernization

upstream

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.

ID: react-modernization

Volver

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

Informacion

Estado	Activo
Origen	upstream
Usos	3
Ultimo uso	23/01 16:57
Actualizado	09/01/2026 02:14

Archivo origen

Z:\Repositorios\core\upstream\plugins\framework-migration\skills\react-modernization\SKILL.md