diff --git a/src/animation/AnimatedComponent.js b/src/animation/AnimatedComponent.js index e720168a1b7..94a57b54e9b 100644 --- a/src/animation/AnimatedComponent.js +++ b/src/animation/AnimatedComponent.js @@ -47,7 +47,7 @@ export default function AnimatedComponent(props: Props): Node { }, [delay, targetValue, useNativeDriver]); useEffect(() => { - if (prevVisible !== visible) { + if (prevVisible !== null && prevVisible !== visible) { animate(); } }, [animate, prevVisible, visible]); diff --git a/src/reactUtils.js b/src/reactUtils.js index bc1a4f2c1a7..f52a272a0bb 100644 --- a/src/reactUtils.js +++ b/src/reactUtils.js @@ -2,8 +2,8 @@ import { useRef, useEffect } from 'react'; /** - * A Hook for the value of a prop, state, etc., from the previous - * render, or the first render if this is the first. + * A Hook for the value of a prop, state, etc., from the previous render, or + * `initValue` (defaults to `null`) if this is the first. * * From * https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state, @@ -11,8 +11,8 @@ import { useRef, useEffect } from 'react'; * `usePrevious` Hook out of the box since it’s a relatively common * use case." */ -export function usePrevious(value: T): T { - const ref = useRef(value); +export function usePrevious(value: T, initValue: T | null = null): T | null { + const ref = useRef(initValue); useEffect(() => { ref.current = value; }); diff --git a/src/user-picker/UserPickerCard.js b/src/user-picker/UserPickerCard.js index 76a7c0d881c..39c01260046 100644 --- a/src/user-picker/UserPickerCard.js +++ b/src/user-picker/UserPickerCard.js @@ -50,7 +50,7 @@ export default function UserPickerCard(props: Props) { const prevSelectedState = usePrevious(selectedState); useEffect(() => { - if (selectedState.length > prevSelectedState.length) { + if (prevSelectedState !== null && selectedState.length > prevSelectedState.length) { setTimeout(() => { listRef.current?.scrollToEnd(); });