How to fix Warning: UNSAFE_componentWillMount is deprecated and should not be used in React

Search your codebase for "UNSAFE_componentWillMount" or "componentWillMount". Check both your own components and any third-party dependencies.

If you're using UNSAFE_componentWillMount for data fetching, subscriptions, or DOM manipulations, move that logic to componentDidMount instead.

// Before
class MyComponent extends React.Component {
  UNSAFE_componentWillMount() {
    this.setupConnection();
  }
}

// After
class MyComponent extends React.Component {
  componentDidMount() {
    this.setupConnection();
  }
}

If you're using UNSAFE_componentWillMount to initialize state based on props, move that logic to the constructor or use getDerivedStateFromProps.

// Before
class MyComponent extends React.Component {
  UNSAFE_componentWillMount() {
    this.setState({ computedValue: this.props.value * 2 });
  }
}

// After
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { computedValue: props.value * 2 };
  }
}

For new code or when refactoring, consider using function components with hooks instead of class components. This avoids lifecycle method issues entirely.

// Function component equivalent
function MyComponent({ value }) {
  const [computedValue, setComputedValue] = useState(value * 2);
  
  useEffect(() => {
    // Side effects here (replaces componentDidMount)
    setupConnection();
    
    return () => {
      // Cleanup (replaces componentWillUnmount)
      destroyConnection();
    };
  }, []);
  
  return <div>{computedValue}</div>;
}

Check if any third-party libraries are causing the warning. Update them to their latest versions. If a library hasn't been updated, consider finding an alternative or contacting the maintainers.

React provides codemods to help migrate away from unsafe lifecycle methods. Run the rename-unsafe-lifecycles codemod:

npx react-codemod rename-unsafe-lifecycles

This will automatically rename componentWillMount to UNSAFE_componentWillMount, which is a first step. Then follow the steps above to remove the usage entirely.