{"type":"doc","content":[{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"⚙️ Что значит “хранить промис в состоянии”?"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Пример (❌ неправильный вариант):"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function User() {\n const [userPromise, setUserPromise] = useState(fetch('/api/user').then(r => r.json()));\n\n // пытаемся использовать...\n userPromise.then(user => console.log(user));\n\n return

Профиль пользователя

;\n}\n"}]},{"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":"bold"}],"text":"источник множества проблем"},{"type":"text","text":"."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"🚫 Почему это плохая идея"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"1. "},{"type":"text","marks":[{"type":"bold"}],"text":"Промисы — не сериализуемы и не детерминированы"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React ожидает, что состояние ("},{"type":"text","marks":[{"type":"code"}],"text":"state"},{"type":"text","text":") — это "},{"type":"text","marks":[{"type":"bold"}],"text":"детерминированные данные"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"которые можно:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"сравнивать ("},{"type":"text","marks":[{"type":"code"}],"text":"Object.is(prev, next)"},{"type":"text","text":"),"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"повторно использовать при повторных рендерах,"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"сбрасывать и восстанавливать (например, при тайм-трэвел дебаггинге в Redux DevTools)."}]}]}]},{"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":"bold"}],"text":"не имеет стабильного значения"},{"type":"text","text":" (его результат появится позже);"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"меняется сам по себе"},{"type":"text","text":" (resolve/reject вне React);"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"нельзя сериализовать"},{"type":"text","text":" (нельзя сохранить в JSON или snapshot)."}]}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"👉 React не может понять, когда именно он “изменился”,"},{"type":"hardBreak"},{"type":"text","text":"поэтому хранить промис в "},{"type":"text","marks":[{"type":"code"}],"text":"state"},{"type":"text","text":" — нарушает саму идею реактивности."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"2. "},{"type":"text","marks":[{"type":"bold"}],"text":"Промис создаёт побочный эффект во время рендера"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"const [data, setData] = useState(fetch('/api/user').then(r => r.json()));\n"}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"❗ Здесь "},{"type":"text","marks":[{"type":"code"}],"text":"fetch()"},{"type":"text","text":" выполняется "},{"type":"text","marks":[{"type":"bold"}],"text":"при каждом рендере"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"а рендеров может быть несколько (React 18 делает двойной рендер в Strict Mode)."}]}]},{"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":"text","marks":[{"type":"bold"}],"text":"новые промисы при каждом рендере"},{"type":"text","text":";"}]}]},{"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":" и "},{"type":"text","marks":[{"type":"bold"}],"text":"утечки"},{"type":"text","text":"."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"3. "},{"type":"text","marks":[{"type":"bold"}],"text":"Нельзя безопасно использовать "},{"type":"text","marks":[{"type":"code"}],"text":"then"},{"type":"text","marks":[{"type":"bold"}],"text":" внутри рендера"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"userPromise.then(data => setUser(data)); // ❌ побочный эффект в теле компонента\n"}]},{"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":"Асинхронная операция внутри тела компонента = "},{"type":"text","marks":[{"type":"bold"}],"text":"грязный рендер"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"React не гарантирует порядок, не сможет правильно отменить или повторить его при Concurrent Rendering."}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"4. "},{"type":"text","marks":[{"type":"bold"}],"text":"React не знает, когда промис завершился"}]},{"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":"code"}],"text":"state"},{"type":"text","text":" — нужно перерендерить компонент.\""}]}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Но если вы храните сам "},{"type":"text","marks":[{"type":"bold"}],"text":"промис"},{"type":"text","text":", а не "},{"type":"text","marks":[{"type":"bold"}],"text":"его результат"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"React не узнает, когда он "},{"type":"text","marks":[{"type":"bold"}],"text":"resolve"},{"type":"text","text":" или "},{"type":"text","marks":[{"type":"bold"}],"text":"reject"},{"type":"text","text":"."}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"То есть UI "},{"type":"text","marks":[{"type":"bold"}],"text":"никогда не обновится"},{"type":"text","text":" автоматически:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"const [userPromise, setUserPromise] = useState(fetch(...));\n// даже после завершения промиса компонент не перерендерится\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"5. "},{"type":"text","marks":[{"type":"bold"}],"text":"Race conditions и устаревшие данные"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если компонент размонтируется или получит новые пропсы —"},{"type":"hardBreak"},{"type":"text","text":"старый промис всё равно может завершиться и попытаться обновить "},{"type":"text","marks":[{"type":"code"}],"text":"state"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"вызывая:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"Warning: Can't perform a React state update on an unmounted component\n"}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":2},"content":[{"type":"text","text":"✅ Как правильно"}]},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✅ Вариант 1. "},{"type":"text","marks":[{"type":"code"}],"text":"useEffect"},{"type":"text","text":" + состояние результата"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function User({ id }) {\n const [user, setUser] = useState(null);\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n let active = true;\n setLoading(true);\n\n fetch(`/api/users/${id}`)\n .then(r => r.json())\n .then(data => active && setUser(data))\n .finally(() => active && setLoading(false));\n\n return () => { active = false; }; // cleanup\n }, [id]);\n\n if (loading) return

;\n return

{user.name}

;\n}\n"}]},{"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":"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":"text","marks":[{"type":"code"}],"text":"user"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"loading"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"error"},{"type":"text","text":");"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React "},{"type":"text","marks":[{"type":"bold"}],"text":"знает, когда обновить UI"},{"type":"text","text":"."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✅ Вариант 2. Через "},{"type":"text","marks":[{"type":"bold"}],"text":"React Query / SWR"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Современные библиотеки берут всё это на себя:"}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"import { useQuery } from \"@tanstack/react-query\";\n\nfunction User({ id }) {\n const { data, isLoading } = useQuery({\n queryKey: ['user', id],\n queryFn: () => fetch(`/api/users/${id}`).then(r => r.json())\n });\n\n if (isLoading) return

;\n return

{data.name}

;\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"React Query:"}]},{"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","text":"кэширует результаты;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"отменяет старые запросы;"}]}]},{"type":"listItem","content":[{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"вызывает ререндер, когда данные готовы."}]}]}]},{"type":"horizontalRule"},{"type":"heading","attrs":{"textAlign":null,"level":3},"content":[{"type":"text","text":"✅ Вариант 3. "},{"type":"text","marks":[{"type":"code"}],"text":"React.Suspense"},{"type":"text","text":" (для React 18+)"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"Если использовать Suspense для данных, то React сам “ожидает” промис под капотом —"},{"type":"hardBreak"},{"type":"text","text":"но это уже контролируемый механизм, а не обычный "},{"type":"text","marks":[{"type":"code"}],"text":"useState"},{"type":"text","text":"."}]},{"type":"codeBlock","attrs":{"language":"javascript"},"content":[{"type":"text","text":"function User({ resource }) {\n const user = resource.user.read(); // может бросить промис\n return

{user.name}

;\n}\n"}]},{"type":"paragraph","attrs":{"textAlign":null},"content":[{"type":"text","text":"🧠 Здесь промис "},{"type":"text","marks":[{"type":"bold"}],"text":"не хранится в состоянии вручную"},{"type":"text","text":","},{"type":"hardBreak"},{"type":"text","text":"React управляет им внутри "},{"type":"text","marks":[{"type":"code"}],"text":"Suspense"},{"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":"сам промис ("},{"type":"text","marks":[{"type":"code"}],"text":"Promise"},{"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":"data"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"error"},{"type":"text","text":", "},{"type":"text","marks":[{"type":"code"}],"text":"loading"},{"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":"useEffect"}]}]}]},{"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}}]}

Почему нельзя хранить промисы в состоянии?

Комментарии