React state is not updating in the first time

Question

I have a image upload component where user can upload one or multiple images at a time. When the user upload an image I always try to update the state using useState(). But the state is not updating in the very first time. How can I update the below code to make this work.

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%2FApp.js

Answer 1

Whenever you use useState with something which is not a primitive type, you should be wary.

These two pages in reacts documentation will give you some clarification:

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

In short, react uses Object.is to determine if the state changed between calls to setState. For objects and arrays, this may return true, even if the content of it changes.

Answer 2

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

To address this issue, you can use the useEffect hook to listen for changes in the file state and perform any necessary actions when it updates. Here's an updated version of your 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 have added an useEffect hook that listens to changes in the file state by specifying file as a dependency in the second argument array of the useEffect hook. Whenever the file state updates, the code inside the useEffect callback function will execute. You can perform any necessary actions with the updated file value within the useEffect hook.

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