diff --git a/packages/ui/src/providers/UploadHandlers/index.tsx b/packages/ui/src/providers/UploadHandlers/index.tsx index ec754a27f25..c94792df0e4 100644 --- a/packages/ui/src/providers/UploadHandlers/index.tsx +++ b/packages/ui/src/providers/UploadHandlers/index.tsx @@ -1,7 +1,7 @@ 'use client' import type { UploadCollectionSlug } from 'payload' -import React, { useState } from 'react' +import React, { useCallback, useMemo, useRef } from 'react' type UploadHandler = (args: { file: File @@ -19,26 +19,28 @@ export type UploadHandlersContext = { const Context = React.createContext(null) export const UploadHandlersProvider = ({ children }) => { - const [uploadHandlers, setUploadHandlers] = useState>( - () => new Map(), + const uploadHandlersRef = useRef>(new Map()) + + const getUploadHandler: UploadHandlersContext['getUploadHandler'] = useCallback( + ({ collectionSlug }) => { + return uploadHandlersRef.current.get(collectionSlug) ?? null + }, + [], ) - const getUploadHandler: UploadHandlersContext['getUploadHandler'] = ({ collectionSlug }) => { - return uploadHandlers.get(collectionSlug) - } + const setUploadHandler: UploadHandlersContext['setUploadHandler'] = useCallback( + ({ collectionSlug, handler }) => { + uploadHandlersRef.current.set(collectionSlug, handler) + }, + [], + ) - const setUploadHandler: UploadHandlersContext['setUploadHandler'] = ({ - collectionSlug, - handler, - }) => { - setUploadHandlers((uploadHandlers) => { - const clone = new Map(uploadHandlers) - clone.set(collectionSlug, handler) - return clone - }) - } + const value = useMemo( + () => ({ getUploadHandler, setUploadHandler }), + [getUploadHandler, setUploadHandler], + ) - return {children} + return {children} } export const useUploadHandlers = (): UploadHandlersContext => {