From aaede1029d58b63ebf5bb7549ef97f9c3a8fc281 Mon Sep 17 00:00:00 2001 From: Kacie Bawiec Date: Wed, 17 Feb 2021 14:57:30 -0800 Subject: [PATCH] Remove UNSAFE_componentWillReceiveProps Summary: This diff removes `UNSAFE_componentWillReceiveProps` and adds the changes to `componentDidUpdate` instead. Why use `componentDidUpdate`? When reading through the [React docs on removing UNSAFE_componentWillReceiveProps](https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops), it says: > If you need to perform a side effect (for example, data fetching or an animation) in response to a change in props, use componentDidUpdate lifecycle instead. The original usage of `UNSAFE_componentWillReceiveProps` updates the content inset when `props.contentInset` changes. However, we don't always want it to update if the content inset hasn't changed, as calling `setValue` will reset the animated value unnecessarily, and kill any current animations (which we don't want to do). [React Native doc on setValue for reference](https://reactnative.dev/docs/animatedvalue#setvalue). Changelog: [General] Use componentDidUpdate instead of UNSAFE_componentwillReceiveProps in ScrollView Reviewed By: lunaleaps Differential Revision: D26487276 fbshipit-source-id: 77419deacf5db676cd721b58f34932bd6ca2399f --- Libraries/Components/ScrollView/ScrollView.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/Libraries/Components/ScrollView/ScrollView.js b/Libraries/Components/ScrollView/ScrollView.js index 03af403c297..a5f17fe1889 100644 --- a/Libraries/Components/ScrollView/ScrollView.js +++ b/Libraries/Components/ScrollView/ScrollView.js @@ -799,19 +799,17 @@ class ScrollView extends React.Component { this._updateAnimatedNodeAttachment(); } - UNSAFE_componentWillReceiveProps(nextProps: Props) { - const currentContentInsetTop = this.props.contentInset + componentDidUpdate(prevProps: Props) { + const prevContentInsetTop = prevProps.contentInset + ? prevProps.contentInset.top + : 0; + const newContentInsetTop = this.props.contentInset ? this.props.contentInset.top : 0; - const nextContentInsetTop = nextProps.contentInset - ? nextProps.contentInset.top - : 0; - if (currentContentInsetTop !== nextContentInsetTop) { - this._scrollAnimatedValue.setOffset(nextContentInsetTop || 0); + if (prevContentInsetTop !== newContentInsetTop) { + this._scrollAnimatedValue.setOffset(newContentInsetTop || 0); } - } - componentDidUpdate() { this._updateAnimatedNodeAttachment(); }