Simple hook that creates a file preview and revokes it when it's no longer needed.

useFilePreview.ts

import { useState, useEffect } from 'react'

type FilePreview = string | null

export function useFilePreview(
  nextFile: File | undefined,
  defaultPreview: FilePreview = null
): FilePreview {
  const [preview, setPreview] = useState<FilePreview>(null)

  useEffect(() => {
    // Make the preview if there is a file
    const objectUrl = nextFile && URL.createObjectURL(nextFile)
    setPreview(objectUrl || null)

    // Release resources if a preview was created
    return () => {
      objectUrl && URL.revokeObjectURL(objectUrl)
    }
  }, [nextFile])

  return preview || defaultPreview
}