Дан код (https://codesandbox.io/s/optimistic-lichterman-fkvfn):
export default function App() {
const [users, setUsers] = React.useState([]);
const [number, setNumber] = React.useState(0);
const fetchUsers = async () => {
const resp = await fetch("https://api.github.com/users");
const data = await resp.json();
console.log("number", number);
console.log("data", data);
setUsers(data);
};
return (
<div className="App">
<button
onClick={() => {
setTimeout(() => {
fetchUsers();
}, 1000);
}}
>
fetch
</button>
<button onClick={() => setNumber(number + 1)}> click </button>
</div>
);
}
Если нажать сначала на кнопку вызова fetchUsers, а после сразу несколько раз на кнопку вызова setNumber, то в методе fetchUsers не будет видно изменения в стейте number. Даже если поставить setTimeout для вызова setNumber. Почему так происходит ? Изменения в обычной переменной в функции fetchUsers будет видно, но переменная не подходит, если компонент перерендеривается.