Revert "@uppy/react: add useUppyState (#4711)" (#4789)

This reverts commit 12e08ada02b9080bd5e1d19526bdf8a2010e62a1.

e2e/clients/react/App.jsx

@@ -2,7 +2,7 @@
 import Uppy from '@uppy/core'
 /* eslint-disable-next-line no-unused-vars */
 import React, { useState } from 'react'
-import { Dashboard, DashboardModal, DragDrop, useUppyState } from '@uppy/react'
+import { Dashboard, DashboardModal, DragDrop } from '@uppy/react'
 import ThumbnailGenerator from '@uppy/thumbnail-generator'
 import RemoteSources from '@uppy/remote-sources'
 
@@ -10,33 +10,24 @@ import '@uppy/core/dist/style.css'
 import '@uppy/dashboard/dist/style.css'
 import '@uppy/drag-drop/dist/style.css'
 
-const uppyDashboard = new Uppy({ id: 'dashboard' }).use(RemoteSources, {
-  companionUrl: 'http://companion.uppy.io',
-  sources: ['GoogleDrive', 'OneDrive', 'Unsplash', 'Zoom', 'Url'],
-})
-const uppyModal = new Uppy({ id: 'modal' })
-const uppyDragDrop = new Uppy({ id: 'drag-drop' }).use(ThumbnailGenerator)
-
 export default function App () {
+  const RemoteSourcesOptions = {
+    companionUrl: 'http://companion.uppy.io',
+    sources: ['GoogleDrive', 'OneDrive', 'Unsplash', 'Zoom', 'Url'],
+  }
+  const uppyDashboard = new Uppy({ id: 'dashboard' }).use(RemoteSources, { ...RemoteSourcesOptions })
+  const uppyModal = new Uppy({ id: 'modal' })
+  const uppyDragDrop = new Uppy({ id: 'drag-drop' }).use(ThumbnailGenerator)
   const [open, setOpen] = useState(false)
-  const files = useUppyState(uppyDashboard, (state) => state.files)
 
   // drag-drop has no visual output so we test it via the uppy instance
   window.uppy = uppyDragDrop
 
   return (
-    <div
-      style={{
-        maxWidth: '30em',
-        margin: '5em 0',
-        display: 'grid',
-        gridGap: '2em',
-      }}
-    >
+    <div style={{ maxWidth: '30em', margin: '5em 0', display: 'grid', gridGap: '2em' }}>
       <button type="button" id="open" onClick={() => setOpen(!open)}>
         Open Modal
       </button>
-      <p>Dashboard file count: {Object.keys(files).length}</p>
 
       <Dashboard id="dashboard" uppy={uppyDashboard} />
       <DashboardModal id="modal" open={open} uppy={uppyModal} />

e2e/clients/react/index.jsx

@@ -1,6 +1,4 @@
 /* eslint-disable react/react-in-jsx-scope */
-// eslint-disable-next-line no-unused-vars
-import React from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.jsx'
 

e2e/package.json

@@ -46,7 +46,6 @@
   },
   "devDependencies": {
     "@parcel/transformer-vue": "^2.9.3",
-    "@types/react": "^18.2.23",
     "cypress": "^13.0.0",
     "cypress-terminal-report": "^5.0.0",
     "deep-freeze": "^0.0.1",

package.json

@@ -98,7 +98,6 @@
     "postcss-logical": "^5.0.0",
     "pre-commit": "^1.2.2",
     "prettier": "^3.0.3",
-    "react": "^18.0.0",
     "remark-cli": "^11.0.0",
     "resolve": "^1.17.0",
     "sass": "^1.29.0",
@@ -168,6 +167,7 @@
   },
   "resolutions": {
     "@types/eslint@^7.2.13": "^8.2.0",
+    "@types/react": "^17",
     "@types/webpack-dev-server": "^4",
     "p-queue": "patch:p-queue@npm%3A7.4.1#./.yarn/patches/p-queue-npm-7.4.1-e0cf0a6f17.patch",
     "pre-commit": "patch:pre-commit@npm:1.2.2#.yarn/patches/pre-commit-npm-1.2.2-f30af83877.patch",

packages/@uppy/react/src/index.js

@@ -5,4 +5,3 @@ export { default as ProgressBar } from './ProgressBar.js'
 export { default as StatusBar } from './StatusBar.js'
 export { default as FileInput } from './FileInput.js'
 export { default as useUppy } from './useUppy.js'
-export { default as useUppyState } from './useUppyState.js'

packages/@uppy/react/src/useUppy.js

@@ -1,8 +1,6 @@
 import { useEffect, useRef } from 'react'
 import { Uppy as UppyCore } from '@uppy/core'
 
-// TODO: remove in the next major
-
 /**
  * @deprecated Initialize Uppy outside of the component.
  */

packages/@uppy/react/src/useUppyState.d.ts

@@ -1,13 +0,0 @@
-import type { Uppy, State } from '@uppy/core'
-
-type ValueOf<T> = T[keyof T]
-
-/**
- * Subscribe to a part of Uppy's state and only re-render when that part changes.
- */
-declare function useUppyState(
-  uppy: Uppy,
-  selector: (state: State) => ValueOf<State>,
-): ValueOf<State>
-
-export default useUppyState

packages/@uppy/react/src/useUppyState.js

@@ -1,14 +0,0 @@
-import { useSyncExternalStore, useMemo, useCallback } from 'react'
-
-export default function useUppyState(uppy, selector) {
-  const subscribe = useMemo(
-    () => uppy.store.subscribe.bind(uppy.store),
-    [uppy.store],
-  )
-  const getSnapshot = useCallback(
-    () => selector(uppy.store.getState()),
-    [uppy.store, selector],
-  )
-
-  return useSyncExternalStore(subscribe, getSnapshot)
-}

yarn.lock

@@ -8322,14 +8322,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:^18.0.0, @types/react@npm:^18.0.8, @types/react@npm:^18.2.23":
-  version: 18.2.23
-  resolution: "@types/react@npm:18.2.23"
+"@types/react@npm:^17":
+  version: 17.0.49
+  resolution: "@types/react@npm:17.0.49"
   dependencies:
     "@types/prop-types": "*"
     "@types/scheduler": "*"
     csstype: ^3.0.2
-  checksum: efb9d1ed1940c0e7ba08a21ffba5e266d8dbbb8fe618cfb97bc902dfc96385fdd8189e3f7f64b4aa13134f8e61947d60560deb23be151253c3a97b0d070897ca
+  checksum: e2e8001bb16fdf52dc92dbc2f64c8e49b1c6ab5d5da4725c0f27e3d925939e42b835554fecc306ca6b0951801eb784288b63c924bd703834662bbaccf89cb68a
   languageName: node
   linkType: hard
 
@@ -8746,7 +8746,6 @@ __metadata:
     postcss-logical: ^5.0.0
     pre-commit: ^1.2.2
     prettier: ^3.0.3
-    react: ^18.0.0
     remark-cli: ^11.0.0
     resolve: ^1.17.0
     sass: ^1.29.0
@@ -14387,7 +14386,6 @@ __metadata:
   resolution: "e2e@workspace:e2e"
   dependencies:
     "@parcel/transformer-vue": ^2.9.3
-    "@types/react": ^18.2.23
     "@uppy/audio": "workspace:^"
     "@uppy/aws-s3": "workspace:^"
     "@uppy/aws-s3-multipart": "workspace:^"