|
|
@@ -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!
|
Kevin van Zonneveld