{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 Короткий ответ"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React "},{"type":"text","marks":[{"type":"bold"}],"text":"специально делает двойной рендер в дев-режиме"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"чтобы "},{"type":"text","marks":[{"type":"bold"}],"text":"помочь тебе обнаружить ошибки и побочные эффекты"},{"type":"text","text":" (side effects)"},{"type":"hardBreak"},{"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":"bold"}],"text":"только в режиме разработки"},{"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":2},"content":[{"type":"text","text":"🔹 Кто “виноват” — Strict Mode"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Двойной рендер в React Dev происходит из-за компонента"},{"type":"hardBreak"},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"который по умолчанию оборачивает всё приложение в "},{"type":"text","marks":[{"type":"code"}],"text":"create-react-app"},{"type":"text","text":", Next.js и других CLI."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"const root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n \n \n \n);\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 Что делает StrictMode"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React.StrictMode — это "},{"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","marks":[{"type":"bold"}],"text":"Вызывает компоненты дважды"},{"type":"text","text":" (в dev)"},{"type":"hardBreak"},{"type":"text","text":"→ чтобы проверить, нет ли побочных эффектов в их теле."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Вызывает "},{"type":"text","marks":[{"type":"code"}],"text":"useEffect"},{"type":"text","marks":[{"type":"bold"}],"text":" и "},{"type":"text","marks":[{"type":"code"}],"text":"useLayoutEffect"},{"type":"text","marks":[{"type":"bold"}],"text":" дважды"},{"type":"hardBreak"},{"type":"text","text":"→ чтобы убедиться, что cleanup работает корректно."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Вызывает "},{"type":"text","marks":[{"type":"code"}],"text":"constructor"},{"type":"text","marks":[{"type":"bold"}],"text":", "},{"type":"text","marks":[{"type":"code"}],"text":"render"},{"type":"text","marks":[{"type":"bold"}],"text":", "},{"type":"text","marks":[{"type":"code"}],"text":"useMemo"},{"type":"text","marks":[{"type":"bold"}],"text":", "},{"type":"text","marks":[{"type":"code"}],"text":"useCallback"},{"type":"text","marks":[{"type":"bold"}],"text":", "},{"type":"text","marks":[{"type":"code"}],"text":"useState"},{"type":"text","marks":[{"type":"bold"}],"text":" и т.д."},{"type":"text","text":" дважды"},{"type":"hardBreak"},{"type":"text","text":"→ в целях тестирования чистоты функций."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 Что такое “чистая функция” в контексте React"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Компонент React — это "},{"type":"text","marks":[{"type":"bold"}],"text":"чистая функция от своих props и state"},{"type":"text","text":":"},{"type":"hardBreak"},{"type":"text","text":"она должна "},{"type":"text","marks":[{"type":"bold"}],"text":"возвращать один и тот же JSX"},{"type":"text","text":" при одинаковых входных данных"},{"type":"hardBreak"},{"type":"text","text":"и "},{"type":"text","marks":[{"type":"bold"}],"text":"не вызывать побочные эффекты"},{"type":"text","text":" (запросы, таймеры, мутации и т.п.)"},{"type":"hardBreak"},{"type":"text","text":"в теле самой функции."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пример “грязного” компонента:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function Timer() {\n console.log('⏱ Запуск таймера');\n setInterval(() => console.log('tick'), 1000);\n return

Таймер

;\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧠 Здесь побочный эффект ("},{"type":"text","marks":[{"type":"code"}],"text":"setInterval"},{"type":"text","text":") вызывается прямо во время рендера."},{"type":"hardBreak"},{"type":"text","text":"React при двойном вызове покажет, что:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"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":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 Пример двойного рендера"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function Example() {\n console.log('🔁 Рендер компонента');\n return

Hello

;\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"👉 В дев-режиме ты увидишь в консоли:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"🔁 Рендер компонента\n🔁 Рендер компонента\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"⚙️ А в "},{"type":"text","marks":[{"type":"bold"}],"text":"продакшене"},{"type":"text","text":" (или если убрать "},{"type":"text","marks":[{"type":"code"}],"text":""},{"type":"text","text":") — только один вызов."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 Зачем React делает это"}]},{"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":"🧩 Проверить чистоту компонентов"}]}]},{"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":"🧹 Проверить корректность cleanup в эффектах"}]}]},{"type":"tableCell","attrs":{"colspan":1,"rowspan":1,"colwidth":null},"content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"useEffect"},{"type":"text","text":" и "},{"type":"text","marks":[{"type":"code"}],"text":"useLayoutEffect"},{"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":"Вызовы API, таймеры, мутации в теле компонента"}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 Какие именно методы React дублирует"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"В "},{"type":"text","marks":[{"type":"bold"}],"text":"StrictMode (только dev):"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🔁 Вызываются повторно:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"функции компонентов;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"useState"},{"type":"text","text":" (инициализация);"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"useReducer"},{"type":"text","text":" (инициализация);"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"useMemo"},{"type":"text","text":" (инициализация);"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"useEffect"},{"type":"text","text":" (mount → unmount → mount);"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"useLayoutEffect"},{"type":"text","text":" (аналогично)."}]}]}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"❌ Не вызываются повторно:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"componentDidCatch"},{"type":"text","text":";"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"code"}],"text":"getDerivedStateFromError"},{"type":"text","text":" (чтобы не ломать ошибки);"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"события и реальные DOM-операции (они выполняются один раз)."}]}]}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 Как это выглядит по шагам"}]},{"type":"orderedList","attrs":{"start":1,"type":null},"content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React вызывает компонент → делает “виртуальный” рендер."}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Сразу же "},{"type":"text","marks":[{"type":"bold"}],"text":"размонтирует"},{"type":"text","text":" его (вызовет cleanup эффектов)."}]}]},{"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":"text","marks":[{"type":"bold"}],"text":"в памяти"},{"type":"text","text":", без повторного изменения DOM,"},{"type":"hardBreak"},{"type":"text","text":"поэтому интерфейс "},{"type":"text","marks":[{"type":"bold"}],"text":"не “мигает”"},{"type":"text","text":" — только консоль покажет повторные вызовы."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 Как отключить двойной рендер"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Чтобы временно убрать двойные вызовы — просто убери StrictMode:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"root.render(\n // ❌ Без \n \n);\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Но ⚠️ это "},{"type":"text","marks":[{"type":"bold"}],"text":"не рекомендуется"},{"type":"text","text":":"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"StrictMode помогает выявить ошибки ещё до продакшена."},{"type":"hardBreak"},{"type":"text","text":"Лучше исправить код, чтобы он был “чистым”."}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🔹 Как писать код, который работает правильно в StrictMode"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"✅ Разрешено:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function Component() {\n const [count, setCount] = useState(0);\n\n useEffect(() => {\n const id = setInterval(() => setCount(c => c + 1), 1000);\n return () => clearInterval(id); // cleanup!\n }, []);\n\n return

{count}

;\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"❌ Нельзя:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function Component() {\n // ❌ Побочный эффект в теле функции\n setInterval(() => console.log('tick'), 1000);\n return

Hello

;\n}\n"}]},{"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":"Почему двойной рендер?"}]}]},{"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":""}]}]}]},{"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":"Только в dev-режиме"}]}]}]},{"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":"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":""},{"type":"text","text":" (но лучше не стоит)"}]}]}]}]},{"type":"paragraph","attrs":{"textAlign":null}}]}

Strict mode и двойной рендер

Комментарии