Идея такая: есть локальный state (hook), в нем массив из четырех элементов. На экране есть кнопка добавления нового элемента в этот массив. При загрузке компонента в useEffect вызывается метод, который каждые 5 секунд удаляет первый элемент из стэйта. Если не трогать кнопку, которая добавляет новый элемент в стэйт, то все работает замечательно. Но если начать добавлять элементы, то удаление срабатывает по предыдущему стэйту, только потом отображается стэйт с новым элементом. Подскажите, как это исправить, чтоб все работало стабильно. Я понимаю, что нужно искать в направлении жизненного цикла, происходит конфликт состояний, но решения найти не могу.
const Component = () => {
const [arr, setArr] = useState(['one', 'two', 'three', 'four']);
React.useEffect(() => {
console.log("render");
setTimeout(deleteElementFromArr, 5000)
});
const addNewElementToArr = () => {
let temp = arr.slice();
temp.push('newElement');
setArr(temp);
};
const deleteElementFromArr = () => {
if (arr.length > 0) {
console.log(arr);
let temp = arr.slice();
temp.splice(0, 1);
setArr(temp)
}
};
return (<div>
<div>
<Button onClick={addNewElementToArr}>add</Button>
</div>
<div style={{margiTop: '10px'}}>
{arr.map(a => `${a} `)}
</div>
</div>)
};