Почему кнопка срабатывает со второго раза?

Question

[SSSSTTTTAAAASSSS]

Разбираюсь с react-om и js. Пытаюсь сделать компонент - счетчик.
Но не пойму, почему он мне показывает правильное количество нажатий, но после обновления первое нажатие всегда неучитывается.
Ниже код

import React, {useState} from 'react';
import classes from './LikeButton.module.css'
import DishesService from "../../API/DischesService.js";

const LikeButton = ({dish, changedLikes}) => {
    const [likes, setLikes] = useState(dish)

    function increment() {
        setLikes({...likes, likes:likes.likes+1})
        likesById(likes)
    }

    function decrement() {
        setLikes({...likes, likes:likes.likes-1})
        likesById(likes)
    }

    async function likesById(likes) {
        await DishesService.likesByID(likes)
    }

    return (
        <div>
            <button
                className={classes.likeButton}
                onClick={() => {
                    increment()
                    changedLikes(likes)
                }}
            >
                <img src={require('../../Images/Likes/like.png')} alt=''/>
            </button>
            <button
                className={classes.likeButton}
                onClick={() => {
                    decrement()
                    changedLikes(likes)
                }}
            >
                <img src={require('../../Images/Likes/dislike.png')} alt=''/>
            </button>
            <p>{likes.likes}</p>
        </div>
    );
};
export default LikeButton;

При том, что на сервер функцией async function likesById(likes) отправляются неизмененные likes функциями increment/decrement, а изначальное состояние.

Пробовал изменять условия при нажатии кнопки и передавать ссылкой а не функцией - эффекта не дало.
Не пойму почему setLikes - отрабатывает не сразу...

Comments

[WbICHA]

likesById(likes)
Так ты сам отправляешь предыдущее состояние.

[SSSSTTTTAAAASSSS]

WbICHA,

так у меня ж изначально идет функция setLikes(), которая и изменяет likes, должна отработать первой, как я понимаю, а потом уже измененные likes передаются в фукнцию likesById(likes), или нет?

[WbICHA]

SSSSTTTTAAAASSSS, нет, функции set асинхронны.

Сохраняй новое значение в переменную и передавай в оба.
Или запихнуть в юзЭффект, как в ответе. Зависит от конкретной задачи.

Answer 1

[Scoo909010]

likesById нужно вызывать в useEffect, потому что это асинхронная операция.

Comments

[SSSSTTTTAAAASSSS]

Scoo909010

спасибо за помощь, видимо не разобрался с useEffectom еще.
Для справки заработало со следующими изменениями:
из функций increment и decrement убрал вызов функции likesById(likes) и добавил хук useEffect

useEffect( () => {
        likesById(likes)
    },[likes])