React: “🔥 React: избегай лишнего состояния с derived state! В React часто вст…”

🔥 React: избегай лишнего состояния с derived state!

В React часто встречается антипаттерн — derived state — когда ты дублируешь вычисляемое значение в useState.

👎 Пример плохого подхода:


const [items, setItems] = useState([]);
const [filtered, setFiltered] = useState([]);

useEffect(() => {
  setFiltered(items.filter(...));
}, [items]);

🔍 Проблема: ты сам обязан синхронизировать filtered с items. Это источник багов, особенно при сложных зависимостях.

✅ Лучше вычисляй на лету:


const filtered = useMemo(() => items.filter(...), [items]);

🔧 useMemo кэширует результат, и ты не хранишь дублирующее состояние.

🧠 Правило: если значение можно вычислить из другого — не пиши useState.

Подробнее: https://react.dev/learn/you-might-not-need-an-effect

📲 Мы в MAX

✍️ @React_lib