React upload de imagem re-renderizando imagens carregadas ao adicionar/excluir

A questão principal provavelmente seria src={URL.createObjectURL(file.fileObject)}. Para entender por que, vamos primeiro dar uma olhada na documentação de URL.createObjectURL():

O URL.createObjectURL()método estático cria uma string contendo uma URL que representa o objeto fornecido no parâmetro.

O tempo de vida do URL está vinculado à documentjanela em que foi criado. O novo URL do objeto representa o Fileobjeto ou Blobobjeto especificado.

Para liberar um URL de objeto, chame revokeObjectURL().

Como você pode ver, o URL tem o tempo de vida do arquivo document. No seu cenário, cada vez que você renderiza App, novos URLs são criados, sem liberar os URLs antigos. Mesmo sempre que Appforem desmontados, os URLs criados permanecem ativos.

Você pode ver isso em ação inspecionando as imagens. Sempre que você exclui uma única imagem, todas as imagens restantes recebem um novo arquivo src.

Para corrigir isso, não crie os URLs na renderização, mas sempre que adicionar a imagem ao estado, assim como faz com os ids. Então, sempre que uma imagem for removida, revogue o URL. (E provavelmente você também deseja revogar o URL na desmontagem do componente.)

function App() {
  const [selectedFiles, setSelectedFiles] = React.useState([]);
  const urls = React.useRef(new Set());

  const handleImageDelete = (id) => {
    setSelectedFiles(selectedFiles.filter((file) => {
      if (file.id !== id) return true; // keep in state
      // delete URL from register (Set) and revoke it
      urls.current.delete(file.url);
      URL.revokeObjectURL(file.url);
      return false; // remove from state
    }));
  };

  const handleChange = (e) => {
    const newFiles = Array.from(e.target.files, (fileObject) => {
      const id = crypto.randomUUID();
      // create URL and add it to the register (Set)
      const url = URL.createObjectURL(fileObject);
      urls.current.add(url);
      return { id, url, fileObject };
    });
    setSelectedFiles([...selectedFiles, ...newFiles])
  }
  
  React.useEffect(() => {
    // revoke register URLs on unmount
    return () => {
      for (const url of urls.current) URL.revokeObjectURL(url);
    };
  }, []);

  return (
    <div className='App'>
      <h1>Hello React.</h1>
      <h2>Start editing to see some magic happen!</h2>
      <input accept="image/png, image/gif, image/jpeg" type="file" onChange={handleChange} multiple />
      {selectedFiles.map(
        (file, index) => {
          return (
            <img
              key={file.id}
              onClick={() => handleImageDelete(file.id)}
              style={{ height: "5rem", backgroundColor: "black" }}
              src={file.url}
              alt={"training spot"}
            />
          )
        }
      )}
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Substituí GenerateGuid()por crypto.randomUUID()para simplificar o snippet apenas para código relevante.

No código acima você verá que a URL é gerada sempre que o arquivo é adicionado à lista de arquivos. Não é mais gerado para cada renderização. Também revogo o URL sempre que a imagem é excluída. Essas mudanças vão longe.

No entanto, para garantir que os URLs sejam revogados sempre que o componente for desmontado, também precisamos adicionar um useEffectgancho. A princípio você pode ficar tentado a fazer algo assim:

React.useEffect(() => {
  return () => {
    selectedFiles.forEach(file => URL.revokeObjectURL(file.url));
  };
}, [selectedFiles]);

Mas o acima NÃO funciona, porque não funciona apenas na desmontagem, mas também sempre que selectedFilesfor alterado. O que significa que sempre que você adicionar arquivos, os URLs serão criados e imediatamente após a renderização serão revogados.

Para resolver esse problema eu uso o useRefgancho. Isto criará um objeto que é exclusivo para esta instância do componente cuja identidade é estável (a referência do objeto nunca muda). Esta referência contém uma Setinstância que uso como registro de URL. Isso nos permite acessar as URLs sem a necessidade de especificar dependências para o useEffectgancho.

React.useEffect(() => {
  // revoke register URLs on unmount
  return () => {
    for (const url of urls.current) URL.revokeObjectURL(url);
  };
}, []); // <- no dependencies, the returned function only runs on unmount

Isso significa que precisamos adicionar/remover as entradas de URL de/para o registro sempre que criarmos ou revogarmos uma URL, tornando a adição/remoção de arquivos um pouco mais complexa.