Bug: useState won't update ui when FileList type object set

I use useState hook to track files change in html input element. When the file changes, console can output correctly when change event fires. but setFileList not work correctly，useEffect didn’t be called and UI did’d be updated.

the first time I choose a image works fine, but the second time works not correctly

React version:react@16.12.0

    const [fileList, setFileList] = useState<FileList | null>()

    const handleImageChange: ChangeEventHandler<HTMLInputElement> = (e) => {
        const { target: { files } } = e
        setFileList(files)
    }

    useEffect(() => {
        console.log('file list changed: ', fileList)  // nothing happened

    }, [fileList])

[yuquanwang]

@Ayman-Moukhtar Yes, need to point out that, e.target.files and [...e.target.files] are different types, the former is a FileList other than Array.

[aymanmoukhtar]

@yuquanwang You’re right, i was able to reproduce on firefox version 73.0.1, the reason is that firefox re-uses the same array for appending/removing the newly added files to the input element. as a result:

// In handleChange function.
e.target.files === fileList  // true

That’s why react doesn’t re-render, as the state didn’t change basically, so there is no need - from react’s perspective - for the component to re-render. As your workaround suggested, you would be fine just changing the array reference setFileList([...e.target.files]);