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

ReactINTERMEDIATEMEDIUMUpdated Dec 10, 2025· 137 views

This warning appears when using deprecated React lifecycle methods like componentWillMount, componentWillReceiveProps, or componentWillUpdate in strict mode. React marks these methods as "UNSAFE_" to indicate they may cause bugs in concurrent features. The warning helps developers migrate to safer alternatives before these methods are removed in future React versions.

Quick fix

Fixes Warning: Using UNSAFE_componentWillMount in strict mode is not recommended

// 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>;
  }
}
  1. Replace UNSAFE_componentWillMount with componentDidMount
  2. Replace UNSAFE_componentWillReceiveProps with getDerivedStateFromProps
  3. Replace UNSAFE_componentWillUpdate with getSnapshotBeforeUpdate
  4. Consider migrating to function components with hooks
react — error
// 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>;
  }
}
Warning: Using UNSAFE_componentWillMount in strict mode is not recommended

What this error means

React introduced strict mode to help identify unsafe patterns in applications. The "UNSAFE_" prefix was added to certain lifecycle methods (componentWillMount, componentWillReceiveProps, componentWillUpdate) to warn developers that these methods have potential issues with React's concurrent features. These methods can be called multiple times, may not align with the new rendering model, and can cause subtle bugs. Strict mode intentionally double-invokes these methods during development to surface potential problems. The warning indicates your code uses patterns that may break in future React versions or cause unexpected behavior in concurrent rendering.

Typical symptoms

  • Console warnings with "UNSAFE_" prefix in development mode
  • Lifecycle methods being called twice during development (strict mode behavior)
  • Components behaving differently in development versus production
  • Unexpected re-renders or state inconsistencies in React 18+ applications
  • Warnings about deprecated methods when using third-party libraries
  • Errors when trying to use React concurrent features like startTransition

Common causes

  1. Using class components with legacy lifecycle methods like componentWillMount, componentWillReceiveProps, or componentWillUpdate
  2. Third-party libraries that haven't been updated for React 16.3+
  3. Copying older React code examples or tutorials from before 2018
  4. Migrating from React 15 or earlier without updating lifecycle methods
  5. Using UNSAFE_componentWillMount instead of the newer componentDidMount
  6. Not enabling strict mode during development, then encountering issues in production

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

1Replace UNSAFE_componentWillMount with componentDidMount

The most common fix is to move initialization logic from componentWillMount to componentDidMount. componentWillMount runs before the component mounts to the DOM, while componentDidMount runs after. For side effects like data fetching, componentDidMount is the correct place.

typescript
// 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>;
  }
}
2Replace UNSAFE_componentWillReceiveProps with getDerivedStateFromProps

For updating state based on prop changes, use static getDerivedStateFromProps instead of componentWillReceiveProps. This method is called both on initial mount and on updates, and should return an object to update state or null for no update.

typescript
// 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
  };
}
3Replace UNSAFE_componentWillUpdate with getSnapshotBeforeUpdate

For capturing DOM information before updates, use getSnapshotBeforeUpdate instead of componentWillUpdate. This method runs right before DOM updates and returns a snapshot value passed to componentDidUpdate.

typescript
// 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;
    }
  }
}
4Consider migrating to function components with hooks

For new code or major refactors, consider migrating class components to function components using hooks. This eliminates lifecycle method concerns entirely.

typescript
// 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>;
}
5Update third-party libraries causing warnings

If warnings come from third-party libraries, check for updates. Many libraries have released versions compatible with React 16.3+. If no update is available, consider:
1. Contacting the library maintainers
2. Creating a wrapper component that suppresses the warning (temporary fix)
3. Finding an alternative library

To temporarily suppress warnings from a specific library:

typescript
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} />;
}
6Run React codemod for automatic migration

React provides a codemod tool to automatically rename deprecated lifecycle methods. This can help with large codebases.

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

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

The codemod will:
1. Find all uses of componentWillMount, componentWillReceiveProps, componentWillUpdate
2. Rename them to UNSAFE_componentWillMount, etc.
3. This is a first step - you still need to migrate to new lifecycle methods

Note: This only renames methods. You still need to implement the migration steps above.

7Test your application after migration

After migrating from unsafe lifecycle methods:
1. Run your test suite to ensure nothing broke
2. Test in development with strict mode enabled (React.StrictMode)
3. Check that lifecycle methods are no longer called twice (strict mode double-invocation should stop for safe methods)
4. Verify that concurrent features like startTransition work correctly
5. Test edge cases like rapid prop changes, unmounting/remounting

Pay special attention to:
- Race conditions in data fetching
- Scroll position preservation
- Animation timing
- Form input focus management

Advanced notes

The "UNSAFE_" prefix doesn't mean the methods are inherently buggy in current React versions. They work in React 16 and 17 but may cause issues with concurrent rendering in React 18+. React Strict Mode double-invokes these methods during development to help surface potential problems. The migration from unsafe lifecycle methods is part of React's gradual adoption strategy for concurrent features. Some third-party libraries, especially those for animations or complex DOM manipulations, may still rely on these methods. In such cases, you might need to use React.memo or shouldComponentUpdate for performance optimizations instead of componentWillUpdate. For server-side rendering, componentWillMount was sometimes used for data fetching, but componentDidMount doesn't run on the server. For SSR, consider using constructor or getDerivedStateFromProps for initial state setup.

Frequently asked questions

What does "Warning: Using UNSAFE_componentWillMount in strict mode is not recomme" mean?
React introduced strict mode to help identify unsafe patterns in applications. The "UNSAFE_" prefix was added to certain lifecycle methods (componentWillMount, componentWillReceiveProps, componentWillUpdate) to warn developers that these methods have potential issues with React's concurrent features. These methods can be called multiple times, may not align with the new rendering model, and can cause subtle bugs.
How do I fix "Warning: Using UNSAFE_componentWillMount in strict mode is not recomme"?
This warning appears when using deprecated React lifecycle methods like componentWillMount, componentWillReceiveProps, or componentWillUpdate in strict mode. React marks these methods as "UNSAFE_" to indicate they may cause bugs in concurrent features. The warning helps developers migrate to safer alternatives before these methods are removed in future React versions.
What causes "Warning: Using UNSAFE_componentWillMount in strict mode is not recomme"?
Using class components with legacy lifecycle methods like componentWillMount, componentWillReceiveProps, or componentWillUpdate Third-party libraries that haven't been updated for React 16.3+ Copying older React code examples or tutorials from before 2018
Is the "Warning: Using UNSAFE_componentWillMount in strict mode is not recomme" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading