{"record":{"id":"fcf5640accf38363","repo":"facebook/react","slug":"componentwillreceiveprops-has-been-renamed-and-is","errorCode":null,"errorMessage":"componentWillReceiveProps has been renamed, and is not recommended for use. See https://react.dev/link/unsafe-component-lifecycles for details.\n\n* Move data fetching code or side effects to componentDidUpdate.\n* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://react.dev/link/derived-state\n* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.\n\nPlease update the following components: %s","messagePattern":"componentWillReceiveProps has been renamed, and is not recommended for use\\. See https://react\\.dev/link/unsafe-component-lifecycles for details\\.\n\n\\* Move data fetching code or side effects to componentDidUpdate\\.\n\\* If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps\\. Learn more at: https://react\\.dev/link/derived-state\n\\* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode\\. In React 18\\.x, only the UNSAFE_ name will work\\. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder\\.\n\nPlease update the following components: %s","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/react-reconciler/src/ReactStrictModeWarnings.js","lineNumber":252,"sourceCode":"      console.warn(\n        'componentWillMount has been renamed, and is not recommended for use. ' +\n          'See https://react.dev/link/unsafe-component-lifecycles for details.\\n\\n' +\n          '* Move code with side effects to componentDidMount, and set initial state in the constructor.\\n' +\n          '* Rename componentWillMount to UNSAFE_componentWillMount to suppress ' +\n          'this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. ' +\n          'To rename all deprecated lifecycles to their new names, you can run ' +\n          '`npx react-codemod rename-unsafe-lifecycles` in your project source folder.\\n' +\n          '\\nPlease update the following components: %s',\n        sortedNames,\n      );\n    }\n\n    if (componentWillReceivePropsUniqueNames.size > 0) {\n      const sortedNames = setToSortedString(\n        componentWillReceivePropsUniqueNames,\n      );\n\n      console.warn(\n        'componentWillReceiveProps has been renamed, and is not recommended for use. ' +\n          'See https://react.dev/link/unsafe-component-lifecycles for details.\\n\\n' +\n          '* Move data fetching code or side effects to componentDidUpdate.\\n' +\n          \"* If you're updating state whenever props change, refactor your \" +\n          'code to use memoization techniques or move it to ' +\n          'static getDerivedStateFromProps. Learn more at: https://react.dev/link/derived-state\\n' +\n          '* Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress ' +\n          'this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. ' +\n          'To rename all deprecated lifecycles to their new names, you can run ' +\n          '`npx react-codemod rename-unsafe-lifecycles` in your project source folder.\\n' +\n          '\\nPlease update the following components: %s',\n        sortedNames,\n      );\n    }\n\n    if (componentWillUpdateUniqueNames.size > 0) {\n      const sortedNames = setToSortedString(componentWillUpdateUniqueNames);\n","sourceCodeStart":234,"sourceCodeEnd":270,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-reconciler/src/ReactStrictModeWarnings.js#L234-L270","documentation":"StrictMode counterpart of the componentWillMount warning, listing components that define componentWillReceiveProps without UNSAFE_ (ReactStrictModeWarnings.js:252). The method runs on every parent re-render and can fire multiple times per commit, which breaks under concurrent rendering and makes it the classic source of derived-state bugs. React points you to componentDidUpdate, getDerivedStateFromProps, or memoization.","triggerScenarios":"Dev build, <StrictMode> around a class component whose prototype defines componentWillReceiveProps as a function without the __suppressDeprecationWarning marker. Flushed once with all offending component names.","commonSituations":"Pre-16.3 class codebases resetting state when props change; syncing prop values into state inside componentWillReceiveProps; old versions of libraries like early react-virtualized or draft-js patterns.","solutions":["If it derives state from props, replace with static getDerivedStateFromProps or memoization (compute during render instead of storing)","If it fetches or runs effects, move the logic to componentDidUpdate with a prop-comparison guard","Run `npx react-codemod rename-unsafe-lifecycles` to rename to UNSAFE_componentWillReceiveProps as a stopgap","Upgrade third-party libraries still shipping the un-prefixed method"],"exampleFix":"// before\ncomponentWillReceiveProps(nextProps) {\n  if (nextProps.userId !== this.props.userId) this.setState({data: null});\n}\n\n// after\nstatic getDerivedStateFromProps(props, state) {\n  if (props.userId !== state.prevUserId) return {prevUserId: props.userId, data: null};\n  return null;\n}","handlingStrategy":"type-guard","validationCode":"function definesComponentWillReceiveProps(ctor) {\n  const m = ctor && ctor.prototype && ctor.prototype.componentWillReceiveProps;\n  return typeof m === 'function' && m.__suppressDeprecationWarning !== true;\n}","typeGuard":"function definesComponentWillReceiveProps(ctor) {\n  const m = ctor && ctor.prototype && ctor.prototype.componentWillReceiveProps;\n  return typeof m === 'function' && m.__suppressDeprecationWarning !== true;\n}","tryCatchPattern":null,"preventionTips":["Derive state during render (getDerivedStateFromProps or memo) instead of mirroring props into state","Do side-effect work in componentDidUpdate with explicit prop-change guards","Apply the rename-unsafe-lifecycles codemod before enabling StrictMode on legacy trees"],"tags":["legacy-lifecycles","component-will-receive-props","class-components","strict-mode","derived-state","deprecation"],"backgroundTag":"unsafe-component-lifecycles","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}