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

✍️ @React_lib

👍7

www.tgoop.com/React_lib/676

1.16K viewsMay 5 at 09:41

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

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

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

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

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

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

BY React