React hooks. Как вызвать функцию с обновленным state?

Question

[Юрий Романов]

Вот пример кода:

function App() {
  const [count, setCount] = useState(0);

  const printCount = () =>{
    console.log(count);
  };

  const incCount = () => {
    setCount(count + 1);
    printCount();
  };

  return (
    <div className="App">
      <button onClick={() => { incCount(); }}>Inc count</button>
      <div>{count}</div>
    </div>
  );
}

При нажатии на кнопку "Inc count" вызывается метод incCount в которой увеличивается значение count и после сразу вызывается метод printCount который выводит значение count в консоль. Так вот, при нажатии значение count увеличилось и стало равно "1", но в консоли выводится значение "0", то есть старое значение. Как будто методы incCount и printCount работают асинхронно и incCount не успевает изменить значение перед вызовом printCount. Как вызвать несколько методов подряд и при этом быть уверенным что они будут работать с обновленным state?

Answer 1

[Андрей Охотников]

Для этого используется useEffect
useEffect(() => console.log(count), [count]);
в данном случае функция будет вызываться каждый раз при изменении count, и в нее уже можно добавлять что угодно, аналогично как работает callback в setState

Comments

[Юрий Романов]

useEffect похоже не совсем подходит для этого.
Об этом подробно расписал Anton Filippov@vicodin

[Anton Filippov]

Юрий Романов, я пересмотрел свой ответ и похоже, что useEffect это пока что наиболее приближенное решение вашей задачи, если мне придет в голову более правильное (без излишних срабатываний), я вернусь и отпишу)

[Юрий Романов]

Anton Filippov, Хорошо. Я пока отмечу ответ Андрей Охотников в качестве решения.

Answer 2

[Medin K]

получилось только так

export default function App() {
  let [count, setCount] = useState(0); // const >>> let

  const printCount = () =>{
    console.log(count);
  };

  const incCount = () => {
    count++; ///////////////////////// increment
    setCount(count); /////////////// set
    printCount();
  };

  return (
    <div className="App">
      <button onClick={() => { incCount(); }}>Inc count</button>
      <div>{count}</div>
    </div>
  );
}

Comments

[Юрий Романов]

Хм...
count++; ///////////////////////// increment
То есть здесь мы напрямую изменили в стейте count, но зачем тогда нужна функция setCount?
Все таки setCount здесь как раз для того чтобы модифицировать стейт аналогично this.setState() который применяли ранее. Напрямую менять count в стейте наверное неправильно =(

[Юрий Романов]

Но если других ответов не будет то применим этот вариант, выбора нет. Спасибо =)

[Medin K]

Юрий Романов, посмотри useEffect

import React, {useState, useEffect } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  const incCount = () => {
    setCount(count+1);
  };

  useEffect(() => {
    console.log(count);
  });

  return (
    <div className="App">
      <button onClick={() => { incCount(); }}>Inc count</button>
      <div>{count}</div>
    </div>
  );
}

[Юрий Романов]

Не совсем то. Вопрос не о том как вывести в консоль нужно значение, а в том как вызвать несколько методов подряд и чтобы каждый метод работал с обновленным стейтом. Вывод в консоль это просто пример. Хотя может быть можно придумать что-то с useEffect. Я попробую.