A bug? Replacing object in array vs modifying object.

[DontUseMyCode]

I do not understand the behavior of below component. If I replace the object inside the array, nothing happens. But If I modify the field of the object, then everything is as expected. This is really strange and smells like a bug. I posted this question on stack overflow, all I got was 2 downvotes and a comment saying : "This code works.". Well, not for me.

function Test() {
    const [files, setFiles] = createSignal([{ f: null }, { f: null }]);

    const handleFileChange = (index: number, event: any) => {
        const file = event.target.files[0]
        const newFiles = [...files()];
        // newFiles[index].f = file;        // This works as expected.
        newFiles[index] = {f:file}       // Nothing happens here. ????
        setFiles(newFiles);
    };
 

    return (
        <div>
            <For each={files()}>
                {(_, index) => (
                    <div>
                        <input
                            type="file"
                            onChange={(event) => handleFileChange(index(), event)}
                         />
     
                    </div>
                )}
            </For>
        </div>
    );
}

[petercockerell-brt]

I'm not sure what you mean by works and doesn't work. Are you saying that files() doesn't get updated correctly? Or that a user of files() isn't triggered? I don't see anything in the example that would allow you to know that. Also, is it problematic that you're reading files() in the same function that calls setFiles()? You might want to use the setFiles((prev) => {...}) form of setFiles() instead. (Or put the files() call in an untrack()).