The rewritten title is: Initial update of React state is not occurring

Question

I have an image upload component where the user can upload one or more images at a time. I always try to use useState() to update the state when the user uploads an image. But the status was not updated immediately. How can I update the following code to make it work properly.

import React from 'react';
import './style.css';
import React, { useState } from 'react';

export default function App() {
  const [file, setFile] = useState([]);

  const uploadImages = (event) => {
    console.log('NewFile=>', event.target.files);

    setFile([...file, ...event.target.files]);
    console.log('UpdatedFiles=>', file);
  };
  return (
    <div>
      <input
        multiple
        type="file"
        name="photo"
        id="photo"
        accept="image/*"
        capture="environment"
        onChange={(event) => uploadImages(event)}
      />
    </div>
  );
}

https://stackblitz.com/edit/react-ujcbjh?file=src/App.js

Answer 1

You should be careful whenever you use useState with non-primitive types.

These two pages from the React documentation will give you some instructions:

• https://react.dev/learn/updating-objects-in-state
• https://react.dev/learn/updating-arrays-in-state

In short, react uses Object.is to determine whether state has changed between calls to setState. For objects and arrays, this may return true even if their contents change.

Answer 2

In React, the useState hook does not update the state immediately. Status updates are asynchronous, which means that the updated status value may not be available immediately after calling the status setter function.

To solve this problem, you can use the useEffect hook to listen for changes in the file's state and perform any necessary actions when updated. Here's an updated version of the code that includes the useEffect hook:

import React, { useState, useEffect } from 'react';
import './style.css';

export default function App() {
  const [file, setFile] = useState([]);

  const uploadImages = (event) => {
    console.log('NewFile=>', event.target.files);
    setFile([...file, ...event.target.files]);
  };

  useEffect(() => {
    console.log('UpdatedFiles=>', file);
  }, [file]);

  return (
    <div>
      <input
        multiple
        type="file"
        name="photo"
        id="photo"
        accept="image/*"
        capture="environment"
        onChange={(event) => uploadImages(event)}
      />
    </div>
  );
}

In this updated code, we added a useEffect hook that listens for changes in the file's state by specifying file as a dependency in the second parameter array of the useEffect hook. Whenever the file status is updated, the code inside the useEffect callback function is executed. You can perform any necessary operations using the updated file values ​​in the useEffect hook.

By using the useEffect hook, you should see the updated status value being logged correctly after the status update.