Tengo un proyecto de crear-reaccionar-aplicación con gancho personalizado como este:

 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types const useStagedUploads = () => { const [items, setItems] = useState<CustomFileWithPath[]>([]); const setUploadItems = (files: CustomFileWithPath[]) => setItems(files); return [items, setUploadItems] as const; }; export default useStagedUploads;

Lo uso para enviar archivos cuando se navega (usando react-dropzone). Ahora, en uno de mis otros componentes, lo uso como se muestra a continuación *:

 const [ items, setUploadItems ] = useStagedUploads(); useEffect(() => { if (items) { onDrop(items); // eslint-disable-next-line @typescript-eslint/no-unsafe-return items.map((i) => // eslint-disable-next-line @typescript-eslint/no-unsafe-return setUploadItems( items.filter( (items: CustomFileWithPath) => items.path !== i.path ) ) ); } }, [items]);

Ahora, cuando la carga se realiza así (react-dropzone):

 const { getInputProps, open, acceptedFiles } = useDropzone({ noClick: true, noKeyboard: true, }); useEffect(() => { if (acceptedFiles) { // eslint-disable-next-line @typescript-eslint/no-unsafe-return acceptedFiles.map((el) => stageUpload(el)); } }, [acceptedFiles]);

... El componente anterior (*) no se vuelve a renderizar (probé consola, depurador, etc.), es decir, no recibo elementos en su matriz " [] " vacía. Tampoco reacciona useEffect body.

Probé usando un tipo primitivo simple que se vuelve a renderizar. ¿Es para que los archivos no se puedan almacenar en ganchos personalizados de reacción o para evitar que se vuelvan a renderizar/cualquier problema de serialización?

Gracias.

Editar:

Como se solicitó en los comentarios, aquí hay un stackblitz: https://stackblitz.com/edit/react-ts-w7swmv?embed=1&file=receive-files.ts