Обновление состояния реакции не отражается немедленно внутри useEffect ⇐ Javascript

[Anonymous]

Я работаю над функциональным компонентом React, где я получаю данные из API, а затем извлекаю из этих данных некоторое состояние. Однако я наблюдаю неожиданное поведение, при котором производное состояние всегда отстает на шаг.
Вот упрощенная версия моего компонента:

Код: Выделить всё

import { useEffect, useState } from "react";

export default function Products() {
const [products, setProducts] = useState([]);
const [filtered, setFiltered] = useState([]);

useEffect(() => {
fetch("/api/products")
.then(res => res.json())
.then(data => {
setProducts(data);
setFiltered(products.filter(p => p.inStock));
});
}, []);

console.log("Filtered products:", filtered);

return (
[list]
{filtered.map(p => (
[*]{p.name}
))}
[/list]
);
}

API возвращает правильные данные, а продукты со временем обновляются, но фильтрация всегда пуста при первом рендеринге и иногда не синхронизируется с продуктами.
Я ожидал, что setFiltered будет использовать обновленное состояние продуктов, но похоже, что вместо этого он использует старое значение.
Я знаю, что обновления состояния React асинхронны, но я не уверен, какое правильное шаблон здесь.
Каков рекомендуемый способ получения состояния из полученных данных в этой ситуации, не вызывая проблем с устаревшим состоянием?

Подробнее здесь: https://stackoverflow.com/questions/798 ... -useeffect