Код-ревью Middle Состояние и данные обновлено
Код-ревью: загрузка данных и стор
Вопрос
Экран профиля с данными из API и глобальным стором. Найдите проблемы.
const AppContext = createContext<any>(null);
export function AppProvider({ children }) {
const [user, setUser] = useState(null);
const [now, setNow] = useState(Date.now());
useEffect(() => { setInterval(() => setNow(Date.now()), 1000); }, []);
return <AppContext.Provider value={{ user, setUser, now }}>{children}</AppContext.Provider>;
}
export function Profile({ id }: { id: string }) {
const { user, setUser } = useContext(AppContext);
useEffect(() => {
fetch(`/api/users/${id}`).then((r) => r.json()).then(setUser);
}, []);
if (!user) return <Spinner />;
return <Text>{user.name}</Text>;
}
Коротко
Серверные данные через useQuery с ключом по id, часто меняющиеся значения не в общем контексте, эффекты с полными зависимостями и очисткой, типизированный контекст.
Что должен найти ревьюер
- Ошибкастрока 6Интервал не очищается: утечка и обновления после размонтирования.
- Производительностьстрока 7В контексте значение
nowменяется каждую секунду, и новый объектvalueперерисовывает всех потребителей, включаяProfile. Часто меняющееся вынести отдельно. - Ошибкастрока 14Нет
idв зависимостях эффекта: при сменеidпрофиль не перезагрузится. - Ошибкастрока 13Нет обработки ошибок и проверки
r.ok; нет отмены: ответ старого запроса может перезаписать новый. ЛучшеuseQuery(['user', id]). - Стильстрока 13Серверные данные пользователя складываются в глобальный контекст вручную: дублирование кеша и рассинхронизация. Для серверного состояния нужен кеш запросов.
- Стильстрока 1
createContext<any>убирает проверку типов для всего приложения.
Разбор
Серверные данные через useQuery с ключом по id, часто меняющиеся значения не в общем контексте, эффекты с полными зависимостями и очисткой, типизированный контекст.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.