setState not running in change handler function, updates on next change-CodePudding

I'm trying to update a state when my date input is changed, and then due to formatting issues update a second state to actually use in my search. This is what my relevant code looks like:

const [eventDate, setEventDate] = useState<string>("");
const [searchDate, setSearchDate] = useState<string>(""); 

function handleDateChange(e: React.ChangeEvent<HTMLInputElement>) {
        setEventDate(e.target.value);
        setSearchDate(eventDate   "T00:00:01Z");
        console.log(`Value: ${e.target.value}`);
        console.log(`Event date: ${eventDate}`);
        console.log(`Search date: ${searchDate}`);
    }

<div className="criteriaSection">
    <label htmlFor="eventdate">Select date</label>
    <input
        type="date"
        name="eventDate"
        id="eventdate"
        value={eventDate}
        onChange={handleDateChange}
    />
</div>

However, when I change the date in the input field, the states update one behind the other. So my log looks like this:

Value: 2022-08-09
Event date: 
Search date: 
Value: 2022-08-10
Event date: 2022-08-09
Search date: T00:00:01Z
Value: 2022-08-11
Event date: 2022-08-10
Search date: 2022-08-09T00:00:01Z

Why do I have to update my date three times to get the initial input to fully register? By the time I've changed the date three times, the state that I need is only just registering the first date that I entered. Shouldn't these all run at once as the value is updated?

Editing to say that I changed it so that it's at least only two behind, but still not updating correctly:

function handleDateChange(e: React.ChangeEvent<HTMLInputElement>) {
  setEventDate(e.target.value);
  setSearchDate(e.target.value   "T00:00:01Z");
  console.log(`Value: ${e.target.value}`);
  console.log(`Event date: ${eventDate}`);
  console.log(`Search date: ${searchDate}`);
}

with output:

Value: 2022-08-15
Event date: 
Search date: 
Value: 2022-08-16
Event date: 2022-08-15
Search date: 2022-08-15T00:00:01Z

CodePudding user response：

This might just be a console.log error rather than a real state error. setState() is asynchronous. This means the result doesn't happen immediately, it's queued up somewhere.

In your console logs, you are outputting the value of the state itself. This value will be lagged by a few ticks.

console.log(`Event date: ${eventDate}`);
console.log(`Search date: ${searchDate}`);

If you really want to know whether it's working, console log with the useEffect hook instead.

useEffect(() => {
    console.log(`Event date: ${eventDate}`);
    console.log(`Search date: ${searchDate}`);
}, [eventDate, searchDate]);