From 853dad032cef1ec7154e1ee69a06c192f45dc916 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 4 Jul 2020 18:41:41 -0500 Subject: [PATCH] componentWillReceiveProps fixes, fixes #184, #231, !80 --- app/soapbox/components/autosuggest_input.js | 10 ++++------ app/soapbox/components/autosuggest_textarea.js | 10 ++++------ app/soapbox/components/media_gallery.js | 18 ++++++------------ app/soapbox/components/modal_root.js | 13 ++++++------- app/soapbox/components/relative_timestamp.js | 14 +++++++------- app/soapbox/features/account_gallery/index.js | 9 +++++---- app/soapbox/features/account_timeline/index.js | 16 ++++++++-------- .../components/emoji_picker_dropdown.js | 4 ++-- app/soapbox/features/favourites/index.js | 9 ++++++--- app/soapbox/features/followers/index.js | 9 +++++---- app/soapbox/features/following/index.js | 9 +++++---- app/soapbox/features/groups/edit/index.js | 14 ++++++-------- app/soapbox/features/groups/members/index.js | 6 +++--- .../features/groups/removed_accounts/index.js | 6 +++--- app/soapbox/features/hashtag_timeline/index.js | 13 +++++++------ app/soapbox/features/list_timeline/index.js | 6 +++--- app/soapbox/features/reblogs/index.js | 9 +++++---- .../features/search/components/header.js | 6 +++--- app/soapbox/features/status/components/card.js | 4 ++-- app/soapbox/features/status/index.js | 17 +++++++++-------- app/soapbox/features/ui/components/bundle.js | 2 +- .../ui/components/focal_point_modal.js | 7 ++++--- .../features/ui/components/image_loader.js | 6 +++--- .../features/ui/components/report_modal.js | 7 ++++--- app/soapbox/features/video/index.js | 15 ++++++++------- 25 files changed, 119 insertions(+), 120 deletions(-) diff --git a/app/soapbox/components/autosuggest_input.js b/app/soapbox/components/autosuggest_input.js index 8b4180b5b..2ae687417 100644 --- a/app/soapbox/components/autosuggest_input.js +++ b/app/soapbox/components/autosuggest_input.js @@ -153,13 +153,11 @@ export default class AutosuggestInput extends ImmutablePureComponent { this.input.focus(); } - static getDerivedStateFromProps(nextProps, state) { - if (nextProps.suggestions && nextProps.suggestions.size > 0 && state.suggestionsHidden && state.focused) { - return { - suggestionsHidden: false, - }; + componentDidUpdate(prevProps, prevState) { + const { suggestions } = this.props; + if (suggestions !== prevProps.suggestions && suggestions.size > 0 && prevState.suggestionsHidden && prevState.focused) { + this.setState({ suggestionsHidden: false }); } - return null; } setInput = (c) => { diff --git a/app/soapbox/components/autosuggest_textarea.js b/app/soapbox/components/autosuggest_textarea.js index 4f686ac37..d9a044022 100644 --- a/app/soapbox/components/autosuggest_textarea.js +++ b/app/soapbox/components/autosuggest_textarea.js @@ -159,13 +159,11 @@ export default class AutosuggestTextarea extends ImmutablePureComponent { this.textarea.focus(); } - static getDerivedStateFromProps(nextProps, state) { - if (nextProps.suggestions && nextProps.suggestions.size > 0 && state.suggestionsHidden && state.focused) { - return { - suggestionsHidden: false, - }; + componentDidUpdate(prevProps, prevState) { + const { suggestions } = this.props; + if (suggestions !== prevProps.suggestions && suggestions.size > 0 && prevState.suggestionsHidden && prevState.focused) { + this.setState({ suggestionsHidden: false }); } - return null; } setTextarea = (c) => { diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js index 58c79e853..f848a396f 100644 --- a/app/soapbox/components/media_gallery.js +++ b/app/soapbox/components/media_gallery.js @@ -253,21 +253,15 @@ class MediaGallery extends React.PureComponent { state = { visible: this.props.visible !== undefined ? this.props.visible : (this.props.displayMedia !== 'hide_all' && !this.props.sensitive || this.props.displayMedia === 'show_all'), width: this.props.defaultWidth, - media: this.props.media, - displayMedia: this.props.displayMedia, }; - static getDerivedStateFromProps(nextProps, state) { - if (!is(nextProps.media, state.media) && nextProps.visible === undefined) { - return { - visible: state.displayMedia !== 'hide_all' && !nextProps.sensitive || state.displayMedia === 'show_all', - }; - } else if (!is(nextProps.visible, state.visible) && nextProps.visible !== undefined) { - return { - visible: nextProps.visible, - }; + componentDidUpdate(prevProps) { + const { media, visible, sensitive } = this.props; + if (!is(media, prevProps.media) && visible === undefined) { + this.setState({ visible: prevProps.displayMedia !== 'hide_all' && !sensitive || prevProps.displayMedia === 'show_all' }); + } else if (!is(visible, prevProps.visible) && visible !== undefined) { + this.setState({ visible }); } - return null; } handleOpen = () => { diff --git a/app/soapbox/components/modal_root.js b/app/soapbox/components/modal_root.js index 9857ad616..1ffb12d3c 100644 --- a/app/soapbox/components/modal_root.js +++ b/app/soapbox/components/modal_root.js @@ -78,21 +78,20 @@ class ModalRoot extends React.PureComponent { window.addEventListener('keyup', this.handleKeyUp, false); } - componentDidUpdate(nextProps, prevProps) { - if (!!nextProps.children && !this.props.children) { + componentDidUpdate(prevProps) { + if (!!this.props.children && !prevProps.children) { this.activeElement = document.activeElement; this.getSiblings().forEach(sibling => sibling.setAttribute('inert', true)); - } else if (!nextProps.children) { + } else if (!prevProps.children) { this.setState({ revealed: false }); } - if (!nextProps.children && !!this.props.children) { - this.activeElement = document.activeElement; + + if (!this.props.children && !!prevProps.children) { this.activeElement.focus(); this.activeElement = null; - } - if (!this.props.children && !!prevProps.children) { this.getSiblings().forEach(sibling => sibling.removeAttribute('inert')); } + if (this.props.children) { requestAnimationFrame(() => { this.setState({ revealed: true }); diff --git a/app/soapbox/components/relative_timestamp.js b/app/soapbox/components/relative_timestamp.js index 1b6e6483b..69c3bad23 100644 --- a/app/soapbox/components/relative_timestamp.js +++ b/app/soapbox/components/relative_timestamp.js @@ -137,8 +137,8 @@ class RelativeTimestamp extends React.Component { this.state.now !== nextState.now; } - componentDidUpdate(nextProps) { - if (this.props.timestamp !== nextProps.timestamp) { + componentDidUpdate(prevProps) { + if (this.props.timestamp !== prevProps.timestamp) { this.setState({ now: Date.now() }); } } @@ -147,19 +147,19 @@ class RelativeTimestamp extends React.Component { this._scheduleNextUpdate(this.props, this.state); } - componentDidUpdate(nextProps, nextState) { - this._scheduleNextUpdate(nextProps, nextState); + componentDidUpdate() { + this._scheduleNextUpdate(); } componentWillUnmount() { clearTimeout(this._timer); } - _scheduleNextUpdate(props, state) { + _scheduleNextUpdate() { clearTimeout(this._timer); - const { timestamp } = props; - const delta = (new Date(timestamp)).getTime() - state.now; + const { timestamp } = this.props; + const delta = (new Date(timestamp)).getTime() - this.state.now; const unitDelay = getUnitDelay(selectUnits(delta)); const unitRemainder = Math.abs(delta % unitDelay); const updateInterval = 1000 * 10; diff --git a/app/soapbox/features/account_gallery/index.js b/app/soapbox/features/account_gallery/index.js index 0b55a0cb0..70552a642 100644 --- a/app/soapbox/features/account_gallery/index.js +++ b/app/soapbox/features/account_gallery/index.js @@ -97,10 +97,11 @@ class AccountGallery extends ImmutablePureComponent { } } - componentDidUpdate(nextProps) { - if (nextProps.accountId && nextProps.accountId !== -1 && (nextProps.accountId !== this.props.accountId && nextProps.accountId)) { - this.props.dispatch(fetchAccount(nextProps.params.accountId)); - this.props.dispatch(expandAccountMediaTimeline(nextProps.accountId)); + componentDidUpdate(prevProps) { + const { accountId, params } = this.props; + if (accountId && accountId !== -1 && (accountId !== prevProps.accountId && accountId)) { + this.props.dispatch(fetchAccount(params.accountId)); + this.props.dispatch(expandAccountMediaTimeline(accountId)); } } diff --git a/app/soapbox/features/account_timeline/index.js b/app/soapbox/features/account_timeline/index.js index 31f5f9175..f3d105b47 100644 --- a/app/soapbox/features/account_timeline/index.js +++ b/app/soapbox/features/account_timeline/index.js @@ -81,17 +81,17 @@ class AccountTimeline extends ImmutablePureComponent { } } - componentDidUpdate(nextProps) { - const { me } = nextProps; - if (nextProps.accountId && nextProps.accountId !== -1 && (nextProps.accountId !== this.props.accountId && nextProps.accountId) || nextProps.withReplies !== this.props.withReplies) { - this.props.dispatch(fetchAccount(nextProps.accountId)); - if (me) this.props.dispatch(fetchAccountIdentityProofs(nextProps.accountId)); + componentDidUpdate(prevProps) { + const { me, accountId, withReplies } = this.props; + if (accountId && accountId !== -1 && (accountId !== prevProps.accountId && accountId) || withReplies !== prevProps.withReplies) { + this.props.dispatch(fetchAccount(accountId)); + if (me) this.props.dispatch(fetchAccountIdentityProofs(accountId)); - if (!nextProps.withReplies) { - this.props.dispatch(expandAccountFeaturedTimeline(nextProps.accountId)); + if (!withReplies) { + this.props.dispatch(expandAccountFeaturedTimeline(accountId)); } - this.props.dispatch(expandAccountTimeline(nextProps.accountId, { withReplies: nextProps.withReplies })); + this.props.dispatch(expandAccountTimeline(accountId, { withReplies })); } } diff --git a/app/soapbox/features/compose/components/emoji_picker_dropdown.js b/app/soapbox/features/compose/components/emoji_picker_dropdown.js index dc3ec4c7f..cac565f96 100644 --- a/app/soapbox/features/compose/components/emoji_picker_dropdown.js +++ b/app/soapbox/features/compose/components/emoji_picker_dropdown.js @@ -56,8 +56,8 @@ class ModifierPickerMenu extends React.PureComponent { this.props.onSelect(e.currentTarget.getAttribute('data-index') * 1); } - componentDidUpdate(nextProps) { - if (nextProps.active) { + componentDidUpdate(prevProps) { + if (this.props.active) { this.attachListeners(); } else { this.removeListeners(); diff --git a/app/soapbox/features/favourites/index.js b/app/soapbox/features/favourites/index.js index 70f9aa55d..6715d3121 100644 --- a/app/soapbox/features/favourites/index.js +++ b/app/soapbox/features/favourites/index.js @@ -27,9 +27,12 @@ class Favourites extends ImmutablePureComponent { this.props.dispatch(fetchFavourites(this.props.params.statusId)); } - componentDidUpdate(nextProps) { - if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) { - this.props.dispatch(fetchFavourites(nextProps.params.statusId)); + componentDidUpdate(prevProps) { + const { statusId } = this.props.params; + const { prevStatusId } = prevProps.params; + + if (statusId !== prevStatusId && statusId) { + this.props.dispatch(fetchFavourites(statusId)); } } diff --git a/app/soapbox/features/followers/index.js b/app/soapbox/features/followers/index.js index 2ba02c4af..9c70187bc 100644 --- a/app/soapbox/features/followers/index.js +++ b/app/soapbox/features/followers/index.js @@ -69,10 +69,11 @@ class Followers extends ImmutablePureComponent { } } - componentDidUpdate(nextProps) { - if (nextProps.accountId && nextProps.accountId !== -1 && (nextProps.accountId !== this.props.accountId && nextProps.accountId)) { - this.props.dispatch(fetchAccount(nextProps.accountId)); - this.props.dispatch(fetchFollowers(nextProps.accountId)); + componentDidUpdate(prevProps) { + const { accountId, dispatch } = this.props; + if (accountId && accountId !== -1 && (accountId !== prevProps.accountId && accountId)) { + dispatch(fetchAccount(accountId)); + dispatch(fetchFollowers(accountId)); } } diff --git a/app/soapbox/features/following/index.js b/app/soapbox/features/following/index.js index f2bab4c06..302bcfc63 100644 --- a/app/soapbox/features/following/index.js +++ b/app/soapbox/features/following/index.js @@ -69,10 +69,11 @@ class Following extends ImmutablePureComponent { } } - componentDidUpdate(nextProps) { - if (nextProps.accountId && nextProps.accountId !== -1 && (nextProps.accountId !== this.props.accountId && nextProps.accountId)) { - this.props.dispatch(fetchAccount(nextProps.accountId)); - this.props.dispatch(fetchFollowing(nextProps.accountId)); + componentDidUpdate(prevProps) { + const { accountId, dispatch } = this.props; + if (accountId && accountId !== -1 && (accountId !== prevProps.accountId && accountId)) { + dispatch(fetchAccount(accountId)); + dispatch(fetchFollowing(accountId)); } } diff --git a/app/soapbox/features/groups/edit/index.js b/app/soapbox/features/groups/edit/index.js index ef917e850..83ae43f4d 100644 --- a/app/soapbox/features/groups/edit/index.js +++ b/app/soapbox/features/groups/edit/index.js @@ -55,16 +55,14 @@ class Edit extends React.PureComponent { setUp: PropTypes.func.isRequired, }; - constructor(nextProps) { - super(nextProps); - if (this.props.group) { - this.props.setUp(this.props.group); - } + constructor(props) { + super(props); + if (props.group) props.setUp(props.group); } - componentDidUpdate(nextProps) { - if (!this.props.group && nextProps.group) { - this.props.setUp(nextProps.group); + componentDidUpdate(prevProps) { + if (!prevProps.group && this.props.group) { + this.props.setUp(this.props.group); } } diff --git a/app/soapbox/features/groups/members/index.js b/app/soapbox/features/groups/members/index.js index 7b3e24b01..72151e146 100644 --- a/app/soapbox/features/groups/members/index.js +++ b/app/soapbox/features/groups/members/index.js @@ -36,9 +36,9 @@ class GroupMembers extends ImmutablePureComponent { this.props.dispatch(fetchMembers(id)); } - componentDidUpdate(nextProps) { - if (nextProps.params.id !== this.props.params.id) { - this.props.dispatch(fetchMembers(nextProps.params.id)); + componentDidUpdate(prevProps) { + if (this.props.params.id !== prevProps.params.id) { + this.props.dispatch(fetchMembers(this.props.params.id)); } } diff --git a/app/soapbox/features/groups/removed_accounts/index.js b/app/soapbox/features/groups/removed_accounts/index.js index 622e57900..e32637e7c 100644 --- a/app/soapbox/features/groups/removed_accounts/index.js +++ b/app/soapbox/features/groups/removed_accounts/index.js @@ -43,9 +43,9 @@ class GroupRemovedAccounts extends ImmutablePureComponent { this.props.dispatch(fetchRemovedAccounts(id)); } - componentDidUpdate(nextProps) { - if (nextProps.params.id !== this.props.params.id) { - this.props.dispatch(fetchRemovedAccounts(nextProps.params.id)); + componentDidUpdate(prevProps) { + if (this.props.params.id !== prevProps.params.id) { + this.props.dispatch(fetchRemovedAccounts(this.props.params.id)); } } diff --git a/app/soapbox/features/hashtag_timeline/index.js b/app/soapbox/features/hashtag_timeline/index.js index c841aeea4..213a833b3 100644 --- a/app/soapbox/features/hashtag_timeline/index.js +++ b/app/soapbox/features/hashtag_timeline/index.js @@ -81,15 +81,16 @@ class HashtagTimeline extends React.PureComponent { dispatch(expandHashtagTimeline(id, { tags })); } - componentDidUpdate(nextProps) { - const { dispatch, params } = this.props; - const { id, tags } = nextProps.params; + componentDidUpdate(prevProps) { + const { dispatch } = this.props; + const { id, tags } = this.props.params; + const { id: prevId, tags: prevTags } = prevProps.params; - if (id !== params.id || !isEqual(tags, params.tags)) { + if (id !== prevId || !isEqual(tags, prevTags)) { this._unsubscribe(); this._subscribe(dispatch, id, tags); - this.props.dispatch(clearTimeline(`hashtag:${id}`)); - this.props.dispatch(expandHashtagTimeline(id, { tags })); + dispatch(clearTimeline(`hashtag:${id}`)); + dispatch(expandHashtagTimeline(id, { tags })); } } diff --git a/app/soapbox/features/list_timeline/index.js b/app/soapbox/features/list_timeline/index.js index a606d90dc..c14df6b23 100644 --- a/app/soapbox/features/list_timeline/index.js +++ b/app/soapbox/features/list_timeline/index.js @@ -50,10 +50,10 @@ class ListTimeline extends React.PureComponent { this.handleDisconnect(); } - componentDidUpdate(nextProps) { - if (nextProps.params.id !== this.props.params.id) { + componentDidUpdate(prevProps) { + if (this.props.params.id !== prevProps.params.id) { this.handleDisconnect(); - this.handleConnect(nextProps.params.id); + this.handleConnect(this.props.params.id); } } diff --git a/app/soapbox/features/reblogs/index.js b/app/soapbox/features/reblogs/index.js index 47fd78463..16876419d 100644 --- a/app/soapbox/features/reblogs/index.js +++ b/app/soapbox/features/reblogs/index.js @@ -41,10 +41,11 @@ class Reblogs extends ImmutablePureComponent { this.props.dispatch(fetchStatus(this.props.params.statusId)); } - componentDidUpdate(nextProps) { - if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) { - this.props.dispatch(fetchReblogs(nextProps.params.statusId)); - this.props.dispatch(fetchStatus(nextProps.params.statusId)); + componentDidUpdate(prevProps) { + const { params } = this.props; + if (params.statusId !== prevProps.params.statusId && params.statusId) { + prevProps.dispatch(fetchReblogs(params.statusId)); + prevProps.dispatch(fetchStatus(params.statusId)); } } diff --git a/app/soapbox/features/search/components/header.js b/app/soapbox/features/search/components/header.js index 82ccb46c6..6c047ffb1 100644 --- a/app/soapbox/features/search/components/header.js +++ b/app/soapbox/features/search/components/header.js @@ -21,9 +21,9 @@ class Header extends ImmutablePureComponent { submittedValue: '', }; - componentDidUpdate(nextProps) { - if (nextProps.submitted) { - const submittedValue = nextProps.value; + componentDidUpdate(prevProps) { + if (this.props.submitted) { + const submittedValue = this.props.value; this.setState({ submittedValue }); } } diff --git a/app/soapbox/features/status/components/card.js b/app/soapbox/features/status/components/card.js index bbca9db93..9a2a37a20 100644 --- a/app/soapbox/features/status/components/card.js +++ b/app/soapbox/features/status/components/card.js @@ -75,8 +75,8 @@ export default class Card extends React.PureComponent { embedded: false, }; - componentDidUpdate(nextProps) { - if (!Immutable.is(this.props.card, nextProps.card)) { + componentDidUpdate(prevProps) { + if (!Immutable.is(prevProps.card, this.props.card)) { this.setState({ embedded: false }); } } diff --git a/app/soapbox/features/status/index.js b/app/soapbox/features/status/index.js index b2f06ff0b..8eb3530f6 100644 --- a/app/soapbox/features/status/index.js +++ b/app/soapbox/features/status/index.js @@ -390,23 +390,24 @@ class Status extends ImmutablePureComponent { this.node = c; } - componentDidUpdate(nextProps) { - if (nextProps.params.statusId !== this.props.params.statusId && nextProps.params.statusId) { + componentDidUpdate(prevProps, prevState) { + const { params, status } = this.props; + const { ancestorsIds } = prevProps; + + if (params.statusId !== prevProps.params.statusId && params.statusId) { this._scrolledIntoView = false; - this.props.dispatch(fetchStatus(nextProps.params.statusId)); + this.props.dispatch(fetchStatus(params.statusId)); } - if (nextProps.status && nextProps.status.get('id') !== this.state.loadedStatusId) { - this.setState({ showMedia: defaultMediaVisibility(nextProps.status), loadedStatusId: nextProps.status.get('id') }); + if (status && status.get('id') !== prevState.loadedStatusId) { + this.setState({ showMedia: defaultMediaVisibility(status), loadedStatusId: status.get('id') }); } if (this._scrolledIntoView) { return; } - const { status, ancestorsIds } = this.props; - - if (status && ancestorsIds && ancestorsIds.size > 0) { + if (prevProps.status && ancestorsIds && ancestorsIds.size > 0) { const element = this.node.querySelectorAll('.focusable')[ancestorsIds.size - 1]; window.requestAnimationFrame(() => { diff --git a/app/soapbox/features/ui/components/bundle.js b/app/soapbox/features/ui/components/bundle.js index bbf3ad20b..7089597b6 100644 --- a/app/soapbox/features/ui/components/bundle.js +++ b/app/soapbox/features/ui/components/bundle.js @@ -37,7 +37,7 @@ class Bundle extends React.PureComponent { this.load(this.props); } - UNSAFE_componentWillReceiveProps(nextProps) { + componentWillReceiveProps(nextProps) { if (nextProps.fetchComponent !== this.props.fetchComponent) { this.load(nextProps); } diff --git a/app/soapbox/features/ui/components/focal_point_modal.js b/app/soapbox/features/ui/components/focal_point_modal.js index 32c66a7f4..189c051fd 100644 --- a/app/soapbox/features/ui/components/focal_point_modal.js +++ b/app/soapbox/features/ui/components/focal_point_modal.js @@ -38,9 +38,10 @@ class FocalPointModal extends ImmutablePureComponent { this.updatePositionFromMedia(this.props.media); } - componentDidUpdate(nextProps) { - if (this.props.media.get('id') !== nextProps.media.get('id')) { - this.updatePositionFromMedia(nextProps.media); + componentDidUpdate(prevProps) { + const { media } = this.props; + if (prevProps.media.get('id') !== media.get('id')) { + this.updatePositionFromMedia(media); } } diff --git a/app/soapbox/features/ui/components/image_loader.js b/app/soapbox/features/ui/components/image_loader.js index 939886f17..4b699365b 100644 --- a/app/soapbox/features/ui/components/image_loader.js +++ b/app/soapbox/features/ui/components/image_loader.js @@ -42,9 +42,9 @@ export default class ImageLoader extends React.PureComponent { this.loadImage(this.props); } - componentDidUpdate(nextProps) { - if (this.props.src !== nextProps.src) { - this.loadImage(nextProps); + componentDidUpdate(prevProps) { + if (prevProps.src !== this.props.src) { + this.loadImage(this.props); } } diff --git a/app/soapbox/features/ui/components/report_modal.js b/app/soapbox/features/ui/components/report_modal.js index dbe48f27f..41ed839ef 100644 --- a/app/soapbox/features/ui/components/report_modal.js +++ b/app/soapbox/features/ui/components/report_modal.js @@ -83,9 +83,10 @@ class ReportModal extends ImmutablePureComponent { this.props.dispatch(expandAccountTimeline(this.props.account.get('id'), { withReplies: true })); } - componentDidUpdate(nextProps) { - if (this.props.account !== nextProps.account && nextProps.account) { - this.props.dispatch(expandAccountTimeline(nextProps.account.get('id'), { withReplies: true })); + componentDidUpdate(prevProps) { + const { account } = this.props; + if (prevProps.account !== account && account) { + this.props.dispatch(expandAccountTimeline(account.get('id'), { withReplies: true })); } } diff --git a/app/soapbox/features/video/index.js b/app/soapbox/features/video/index.js index 490748274..2c2fc33c7 100644 --- a/app/soapbox/features/video/index.js +++ b/app/soapbox/features/video/index.js @@ -291,17 +291,18 @@ class Video extends React.PureComponent { document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange, true); } - UNSAFE_componentWillReceiveProps(nextProps) { - if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) { - this.setState({ revealed: nextProps.visible }); - } - } - componentDidUpdate(prevProps, prevState) { + const { visible, blurhash } = this.props; + + if (!is(visible, prevProps.visible) && visible !== undefined) { + this.setState({ revealed: visible }); + } + if (prevState.revealed && !this.state.revealed && this.video) { this.video.pause(); } - if (prevProps.blurhash !== this.props.blurhash && this.props.blurhash) { + + if (prevProps.blurhash !== blurhash && blurhash) { this._decode(); } }