Выбор ответа Junior Код-ревью спрашивают часто обновлено
Что не так с эффектом
Вопрос
Какая проблема в этом компоненте самая серьёзная?
function UserList({ query }: { query: string }) {
const [users, setUsers] = useState<User[]>([]);
useEffect(() => {
fetch('/api/users?q=' + encodeURIComponent(query))
.then(r => r.json())
.then(setUsers);
}, []);
return <List users={users} />;
}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: query нет в зависимостях: при его смене данные не перезагрузятся. С пустым массивом зависимостей эффект выполнится один раз, и при новом query список останется старым.
Варианты ответа
- Нужно передать async-функцию прямо в
useEffect(async () => ...) queryнет в зависимостях: при его смене данные не перезагрузятсяправильный ответ- Не хватает
useCallbackвокругsetUsers, он меняется на каждый рендер - Нельзя вызывать
fetchвнутри компонента, только в сервисном слое
Разбор
С пустым массивом зависимостей эффект выполнится один раз, и при новом query список останется старым. Правило react-hooks/exhaustive-deps это ловит. Передавать async-функцию в useEffect нельзя: эффект должен вернуть функцию очистки, а не промис. setUsers и так стабилен. fetch в эффекте допустим, хотя лучше использовать библиотеку данных.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.