How to fix Warning: componentWillMount has been renamed to UNSAFE_componentWillMount in React

class MyComponent extends React.Component {
  componentWillMount() {
    this.setState({
      currentColor: this.props.defaultColor,
      isReady: false
    });
  }
}

class MyComponent extends React.Component {
  state = {
    currentColor: this.props.defaultColor,
    isReady: false
  };
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      currentColor: props.defaultColor,
      isReady: false
    };
  }
}

class UserProfile extends React.Component {
  componentWillMount() {
    fetch(`/api/users/${this.props.userId}`)
      .then(res => res.json())
      .then(user => this.setState({ user }));
  }
}

class UserProfile extends React.Component {
  componentDidMount() {
    fetch(`/api/users/${this.props.userId}`)
      .then(res => res.json())
      .then(user => this.setState({ user }));
  }
}

class DataFetcher extends React.Component {
  state = { data: null, loading: true };

  componentWillMount() {
    // Deprecated pattern
    this.fetchData();
  }

  fetchData() {
    fetch('/api/data')
      .then(res => res.json())
      .then(data => this.setState({ data, loading: false }));
  }

  render() {
    if (this.state.loading) return <div>Loading...</div>;
    return <div>{this.state.data}</div>;
  }
}

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(data => {
        setData(data);
        setLoading(false);
      });
  }, []); // Empty array means run once on mount

  if (loading) return <div>Loading...</div>;
  return <div>{data}</div>;
}

# Install jscodeshift if you don't have it
npm install -g jscodeshift

# Run the codemod on your source directory
npx react-codemod rename-unsafe-lifecycles src/

npm outdated
npm update <package-name>

// In your index.js or App.js
const originalError = console.error;
console.error = (...args) => {
  if (/componentWillMount/.test(args[0])) return;
  originalError.call(console, ...args);
};