From da6bde828a58b20c233cbc3e50a69c278fa1e284 Mon Sep 17 00:00:00 2001 From: Sidhant Panda Date: Sun, 25 Aug 2019 13:34:26 +0530 Subject: [PATCH] Fix `componentWillUpdate` has been renamed warning Moves the extraction of props and eventListeners logic from `componentWillUpdate` to `componentDidUpdate`. This fixes the following warning from the console: ``` Warning: componentWillUpdate has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details. * Move data fetching code or side effects to componentDidUpdate. * Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. In React 17.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. Please update the following components: Lottie ``` --- src/index.js | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/src/index.js b/src/index.js index 66770d5..143546f 100644 --- a/src/index.js +++ b/src/index.js @@ -38,19 +38,16 @@ export default class Lottie extends React.Component { this.setAnimationControl(); } - componentWillUpdate(nextProps /* , nextState */) { - /* Recreate the animation handle if the data is changed */ - if (this.options.animationData !== nextProps.options.animationData) { - this.deRegisterEvents(this.props.eventListeners); + componentDidUpdate(prevProps) { + if (prevProps.options.animationData !== this.props.options.animationData) { + this.deRegisterEvents(prevProps.eventListeners); this.destroy(); - this.options = { ...this.options, ...nextProps.options }; + this.options = { ...prevProps.options, ...this.props.options }; this.anim = lottie.loadAnimation(this.options); this.animApi = lottieApi.createAnimationApi(this.anim); - this.registerEvents(nextProps.eventListeners); + this.registerEvents(this.props.eventListeners); } - } - - componentDidUpdate() { + if (this.props.isStopped) { this.stop(); } else if (this.props.segments) {