{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"💡 Что такое "},{"type":"text","marks":[{"type":"bold"}],"text":"derived state (производное состояние)"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Derived state"},{"type":"text","text":" — это состояние, которое можно вычислить из уже существующего состояния или пропсов."}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Проще говоря:"},{"type":"hardBreak"},{"type":"text","text":"это "},{"type":"text","marks":[{"type":"bold"}],"text":"дубликат данных"},{"type":"text","text":", который не является “источником истины” ("},{"type":"text","marks":[{"type":"italic"}],"text":"source of truth"},{"type":"text","text":"),"},{"type":"hardBreak"},{"type":"text","text":"а "},{"type":"text","marks":[{"type":"bold"}],"text":"зависит от других данных"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"📦 Пример — derived state в чистом виде (❌ плохо)"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function Example({ items }) {\n const [count, setCount] = useState(items.length); // ❌ derived state\n\n return

Элементов: {count}

;\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Здесь "},{"type":"text","marks":[{"type":"code"}],"text":"count"},{"type":"text","text":" полностью зависит от "},{"type":"text","marks":[{"type":"code"}],"text":"items"},{"type":"text","text":"."},{"type":"hardBreak"},{"type":"text","text":"Если "},{"type":"text","marks":[{"type":"code"}],"text":"items"},{"type":"text","text":" изменятся — "},{"type":"text","marks":[{"type":"code"}],"text":"count"},{"type":"text","text":" "},{"type":"text","marks":[{"type":"bold"}],"text":"останется старым"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"пока ты не обновишь его вручную через "},{"type":"text","marks":[{"type":"code"}],"text":"useEffect"},{"type":"text","text":" или "},{"type":"text","marks":[{"type":"code"}],"text":"setCount"},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔴 Это создаёт "},{"type":"text","marks":[{"type":"bold"}],"text":"несинхронность"},{"type":"text","text":" —"},{"type":"hardBreak"},{"type":"text","text":"у тебя появляются "},{"type":"text","marks":[{"type":"bold"}],"text":"два источника истины"},{"type":"text","text":" ("},{"type":"text","marks":[{"type":"code"}],"text":"items"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"code"}],"text":"count"},{"type":"text","text":")."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚠️ Почему derived state — опасен"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"1. ❌ Нарушает принцип “Single Source of Truth”"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React-архитектура строится на идее:"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"“Каждое состояние должно иметь "},{"type":"text","marks":[{"type":"bold"}],"text":"один источник истины"},{"type":"text","text":".”"}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда ты создаёшь derived state, ты фактически делаешь “копию” этих данных."},{"type":"hardBreak"},{"type":"text","text":"Теперь нужно следить, чтобы обе версии всегда были синхронизированы."},{"type":"hardBreak"},{"type":"text","text":"Это → источник багов."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"2. ⚠️ Несинхронные обновления"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function Example({ items }) {\n const [count, setCount] = useState(items.length);\n\n useEffect(() => {\n setCount(items.length);\n }, [items]);\n\n return

{count}

;\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Да, можно “синхронизировать” через "},{"type":"text","marks":[{"type":"code"}],"text":"useEffect"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"но это "},{"type":"text","marks":[{"type":"bold"}],"text":"лишний рендер"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"bold"}],"text":"лишняя сложность"},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Зачем хранить "},{"type":"text","marks":[{"type":"code"}],"text":"count"},{"type":"text","text":", если его можно вычислить напрямую?"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✅ Правильно:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function Example({ items }) {\n return

Элементов: {items.length}

;\n}\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"3. 💥 Производные данные могут “отставать”"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если ты вычисляешь derived state внутри "},{"type":"text","marks":[{"type":"code"}],"text":"setState"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"он может использовать "},{"type":"text","marks":[{"type":"bold"}],"text":"устаревшие данные"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"так как "},{"type":"text","marks":[{"type":"code"}],"text":"setState"},{"type":"text","text":" асинхронный:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"setItems([...items, newItem]);\nsetCount(items.length); // ❌ ещё старое значение\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React применит оба апдейта позже —"},{"type":"hardBreak"},{"type":"text","text":"и "},{"type":"text","marks":[{"type":"code"}],"text":"count"},{"type":"text","text":" окажется "},{"type":"text","marks":[{"type":"bold"}],"text":"на 1 меньше"},{"type":"text","text":", чем нужно."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"✅ Что делать вместо derived state"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Вместо хранения производных данных —"},{"type":"hardBreak"},{"type":"text","marks":[{"type":"bold"}],"text":"вычисляй их на лету"},{"type":"text","text":", когда нужно отрисовать."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"💡 Пример 1 — вычисление прямо в JSX"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function Example({ items }) {\n const total = items.length; // вычисляем без хранения\n return

Всего элементов: {total}

;\n}\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"💡 Пример 2 — вычисление внутри "},{"type":"text","marks":[{"type":"code"}],"text":"useMemo"},{"type":"text","text":" (для тяжёлых вычислений)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если вычисление дорогое (например, фильтрация, сортировка) —"},{"type":"hardBreak"},{"type":"text","text":"используй "},{"type":"text","marks":[{"type":"code"}],"text":"useMemo"},{"type":"text","text":", чтобы кэшировать результат:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function Products({ items, filter }) {\n const visibleItems = useMemo(\n () => items.filter(item => item.category === filter),\n [items, filter]\n );\n\n return

Показано: {visibleItems.length}

;\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Здесь "},{"type":"text","marks":[{"type":"code"}],"text":"visibleItems"},{"type":"text","text":" — "},{"type":"text","marks":[{"type":"bold"}],"text":"derived value"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"но не "},{"type":"text","marks":[{"type":"bold"}],"text":"stored state"},{"type":"text","text":", а просто вычисляемое значение → ✅ безопасно."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🧠 Когда derived state всё-таки допустим"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Иногда производное состояние "},{"type":"text","marks":[{"type":"bold"}],"text":"оправдано"},{"type":"text","text":", если:"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Оно "},{"type":"text","marks":[{"type":"bold"}],"text":"не прямо вычисляется"},{"type":"text","text":" из props/state,"},{"type":"hardBreak"},{"type":"text","text":"а сохраняет "},{"type":"text","marks":[{"type":"bold"}],"text":"промежуточное значение"},{"type":"text","text":" (например, пользователь вводит, а мы дебаунсим)."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Или тебе нужно "},{"type":"text","marks":[{"type":"bold"}],"text":"“заморозить” значение"},{"type":"text","text":" на момент события."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Примеры допустимых случаев:"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"1️⃣ Контролируемый ввод (debounce)"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"const [query, setQuery] = useState(\"\");\nconst [debouncedQuery, setDebouncedQuery] = useState(query);\n\nuseEffect(() => {\n const id = setTimeout(() => setDebouncedQuery(query), 500);\n return () => clearTimeout(id);\n}, [query]);\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"→ "},{"type":"text","marks":[{"type":"code"}],"text":"debouncedQuery"},{"type":"text","text":" — derived, но осознанно и с эффектом."}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"2️⃣ “Снимок” данных"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"const [snapshot, setSnapshot] = useState(null);\n\nfunction handleSubmit() {\n setSnapshot(formData); // сохраняем состояние формы на момент отправки\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"→ Это не дублирование, а фиксация значения во времени."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"📋 Итого"}]},{"type":"table","content":[{"type":"tableRow","content":[{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Вопрос"}]}]},{"type":"tableHeader","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Ответ"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Что такое derived state?"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Состояние, вычисляемое из другого состояния или пропсов"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Почему это плохо?"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Создаёт дублирование данных и рассинхронизацию"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Как лучше?"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Вычислять на лету или через "},{"type":"text","marks":[{"type":"code"}],"text":"useMemo"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Когда допустимо?"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Для “снимков” данных, дебаунса, промежуточных состояний"}]}]}]},{"type":"tableRow","content":[{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Главный принцип"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"❗ Всегда храни “источник истины” в одном месте"}]}]}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Что такое “derived state”

Комментарии