{"record":{"id":"9f945202ea608596","repo":"facebook/react","slug":"componentwillupdate-has-been-renamed-and-is-not-r","errorCode":null,"errorMessage":"componentWillUpdate has been renamed, and is not recommended for use. See https://react.dev/link/unsafe-component-lifecycles for details.\n\n* Move code with side effects to componentDidUpdate.\n* Rename componentWillUpdate to UNSAFE_componentWillUpdate 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":"componentWillUpdate has been renamed, and is not recommended for use\\. See https://react\\.dev/link/unsafe-component-lifecycles for details\\.\n\n\\* Move code with side effects to componentDidUpdate\\.\n\\* Rename componentWillUpdate to UNSAFE_componentWillUpdate 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":271,"sourceCode":"        '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\n      console.warn(\n        'componentWillUpdate 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          '* Rename componentWillUpdate to UNSAFE_componentWillUpdate 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\n  let pendingLegacyContextWarning: FiberToFiberComponentsMap = new Map();\n\n  // Tracks components we have already warned about.\n  const didWarnAboutLegacyContext = new Set<mixed>();\n","sourceCodeStart":253,"sourceCodeEnd":289,"githubUrl":"https://github.com/facebook/react/blob/eafeac097ba51e1eab809c07102126bd5f8e5425/packages/react-reconciler/src/ReactStrictModeWarnings.js#L253-L289","documentation":"StrictMode warning listing class components that define componentWillUpdate without UNSAFE_ (ReactStrictModeWarnings.js:271). Like the other cWM* lifecycles, it can fire multiple times per committed update (and once per strict-mode double render), so side effects placed there run on renders that may be thrown away. React directs you to componentDidUpdate for effects and to the UNSAFE_ rename as an explicit acknowledgment.","triggerScenarios":"Dev build, <StrictMode> around a class component defining componentWillUpdate as a function (without the compat suppress flag). Names are deduped and flushed in one sorted list.","commonSituations":"Legacy classes doing DOM measurement or logging before the update; analytics code in componentWillUpdate; components copied from pre-2018 codebases during a React 18/19 upgrade.","solutions":["Move the side effects into componentDidUpdate (all commit-time work belongs there)","For pre-update DOM reads, use the UNSAFE_ rename only after confirming the read is idempotent","Run `npx react-codemod rename-unsafe-lifecycles` across the repo","Replace the class with a function component and useEffect/useLayoutEffect"],"exampleFix":"// before\ncomponentWillUpdate(nextProps) { document.title = nextProps.title; }\n\n// after\ncomponentDidUpdate(nextProps) { document.title = nextProps.title; }","handlingStrategy":"type-guard","validationCode":"function definesComponentWillUpdate(ctor) {\n  const m = ctor && ctor.prototype && ctor.prototype.componentWillUpdate;\n  return typeof m === 'function' && m.__suppressDeprecationWarning !== true;\n}","typeGuard":"function definesComponentWillUpdate(ctor) {\n  const m = ctor && ctor.prototype && ctor.prototype.componentWillUpdate;\n  return typeof m === 'function' && m.__suppressDeprecationWarning !== true;\n}","tryCatchPattern":null,"preventionTips":["Place all post-update work in componentDidUpdate","Assume strict-mode double invocation for every legacy lifecycle when testing","Convert classes with pre-update DOM reads to function components with useLayoutEffect"],"tags":["legacy-lifecycles","component-will-update","class-components","strict-mode","deprecation"],"backgroundTag":"unsafe-component-lifecycles","analyzedSha":"eafeac097ba51e1eab809c07102126bd5f8e5425","analyzedAt":"2026-08-21T22:01:08.818Z","schemaVersion":2},"datasetVersion":"2026-08-21T23:17:16.201Z"}