usePrevious [nfc]: Default to null on first render.

As Greg pointed out a few weeks ago [1], `usePrevious` has had a
"funny quirk where on the first call, it takes the "previous" value
to be the current one."

Instead, let the caller decide what the value should be on the first
render, or just have it be `null` if the caller is fine with that.

[1] zulip#4914 (comment)

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]);

src/reactUtils.js

@@ -2,17 +2,17 @@
 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,
  * which says, "It’s possible that in the future React will provide a
  * `usePrevious` Hook out of the box since it’s a relatively common
  * use case."
  */
-export function usePrevious<T>(value: T): T {
-  const ref = useRef<T>(value);
+export function usePrevious<T>(value: T, initValue: T | null = null): T | null {
+  const ref = useRef<T | null>(initValue);
   useEffect(() => {
     ref.current = value;
   });

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();
       });