For React Initialization Docs, update useMemo to useRef (#2519)

Co-authored-by: Dylan Petro <dylanpetro@Dylans-MacBook-Pro.local>
Co-authored-by: Renée Kooi <renee@kooi.me>

website/src/docs/react-initializing.md

@@ -12,44 +12,56 @@ When using Uppy's React components, an Uppy instance must be passed in to the `u
 
 ## Functional Components
 
-With React Hooks, the `useMemo` hook can be used to create an instance once and remember it for all rerenders. The `useEffect` hook can close the Uppy instance when the component unmounts.
+With React Hooks, the `useRef` hook can be used to create an instance once and remember it for all rerenders. The `useEffect` hook can close the Uppy instance when the component unmounts.
 
 ```js
-const MyComponent = () => {
-  const uppy = React.useMemo(() => {
-    // Do all the configuration here
-    return new Uppy()
+function MyComponent () {
+  const uppy = useRef(undefined);
+  // Make sure we only initialize it the first time:
+  if (uppy.current === undefined) {
+    uppy.current = new Uppy()
       .use(Transloadit, {})
-  }, []);
+  }
 
   React.useEffect(() => {
-    return () => uppy.close()
+    // Return a cleanup function:
+    return () => uppy.current.close()
   }, [])
 
   return <DashboardModal uppy={uppy} />
 }
 ```
 
-Both hooks must receive the `[]` dependency array parameter, or the Uppy instance will be recreated and/or destroyed every time the component rerenders. To make sure you never forget that, a custom hook could be used:
+With `useRef`, the Uppy instance and its functions are stored on the `.current` property.
+`useEffect()` must receive the `[]` dependency array parameter, or the Uppy instance will be destroyed every time the component rerenders.
+To make sure you never forget these requirements, you could wrap it up in a custom hook:
+
 ```js
 function useUppy (factory) {
-  const uppy = React.useMemo(factory, [])
+  const uppy = React.useRef(undefined)
+  // Make sure we only initialize it the first time:
+  if (uppy.current === undefined) {
+    uppy.current = factory()
+  }
+
   React.useEffect(() => {
-    return () => uppy.close()
+    return () => uppy.current.close()
   }, [])
-  return new uppy
+  return uppy.current
 }
 
 // Then use it as:
-const uppy = useUppy(() => {
-  return new Uppy()
+const uppy = useUppy(() =>
+  new Uppy()
     .use(Tus, {})
-})
+)
 ```
 
+(The function wrapper is required here so you don't create an unused Uppy instance on each rerender.)
+
 ## Class Components
 
-A simple approach is to initialize it in your React component's `constructor()` and destroy it in `componentWillUnmount()`.
+A simple approach is to create an Uppy instance in your React component's `constructor()` and destroy it in `componentWillUnmount()`.
 
 > ⚠ Uppy instances are stateful, so the same instance must be used across different renders.
 > Do **NOT** initialize Uppy in a `render()` method!