How to fix Warning: Using UNSAFE_componentWillMount in strict mode is not recommended in React

// BEFORE - Using deprecated method
class MyComponent extends React.Component {
  UNSAFE_componentWillMount() {
    this.fetchData();
  }
  
  fetchData() {
    // Fetch data
  }
  
  render() {
    return <div>Data: {this.state.data}</div>;
  }
}

// AFTER - Using recommended method
class MyComponent extends React.Component {
  componentDidMount() {
    this.fetchData();
  }
  
  fetchData() {
    // Fetch data
  }
  
  render() {
    return <div>Data: {this.state.data}</div>;
  }
}

// BEFORE - Using deprecated method
class MyComponent extends React.Component {
  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.value !== this.props.value) {
      this.setState({ internalValue: nextProps.value });
    }
  }
}

// AFTER - Using recommended method
class MyComponent extends React.Component {
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.value !== prevState.prevValue) {
      return {
        internalValue: nextProps.value,
        prevValue: nextProps.value
      };
    }
    return null;
  }
  
  state = {
    internalValue: this.props.value,
    prevValue: this.props.value
  };
}

// BEFORE - Using deprecated method
class MyComponent extends React.Component {
  UNSAFE_componentWillUpdate(nextProps, nextState) {
    if (this.props.value !== nextProps.value) {
      this.previousScroll = this.scrollRef.current.scrollTop;
    }
  }
  
  componentDidUpdate(prevProps, prevState) {
    // Restore scroll position
  }
}

// AFTER - Using recommended method
class MyComponent extends React.Component {
  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (this.props.value !== prevProps.value) {
      return this.scrollRef.current.scrollTop;
    }
    return null;
  }
  
  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot !== null) {
      // snapshot contains the scroll position
      this.scrollRef.current.scrollTop = snapshot;
    }
  }
}

// Class component with lifecycle methods
class DataFetcher extends React.Component {
  componentDidMount() {
    this.fetchData();
  }
  
  componentDidUpdate(prevProps) {
    if (this.props.id !== prevProps.id) {
      this.fetchData();
    }
  }
  
  // ...
}

// Function component with hooks
function DataFetcher({ id }) {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetchData(id).then(setData);
  }, [id]); // Dependency array ensures re-fetch when id changes
  
  return <div>{data}</div>;
}

import { useEffect } from "react";

function WrappedThirdPartyComponent(props) {
  useEffect(() => {
    const originalError = console.error;
    console.error = (...args) => {
      if (args[0]?.includes("UNSAFE_")) return;
      originalError.call(console, ...args);
    };
    return () => {
      console.error = originalError;
    };
  }, []);
  
  return <ThirdPartyComponent {...props} />;
}

# Install the codemod
npx react-codemod rename-unsafe-lifecycles

# Run on your project
cd your-project
npx react-codemod rename-unsafe-lifecycles