Код-ревью Middle Навигация обновлено
Код-ревью: навигация в приложении магазина
Вопрос
Фрагмент навигации магазина. Найдите проблемы.
function Root() {
const user = useAuth();
useEffect(() => {
if (!user) navigationRef.navigate('Login');
}, [user]);
return (
<NavigationContainer ref={navigationRef}>
<Stack.Navigator>
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Catalog" component={Catalog} />
<Stack.Screen name="Item" component={Item} />
</Stack.Navigator>
</NavigationContainer>
);
}
function Catalog({ navigation }) {
const [items, setItems] = useState([]);
useEffect(() => { api.catalog().then(setItems); }, []);
const open = (item) => navigation.navigate('Item', { item, onBuy: () => addToCart(item) });
// ...
}
Коротко
Авторизация через условный рендер, параметры только сериализуемые и типизированные, загрузка данных привязана к фокусу или к кешу запросов.
Что должен найти ревьюер
- Ошибкастрока 4Ручная навигация на вход по эффекту: экраны каталога остаются в истории, «назад» вернёт в закрытую часть, а при старте возможен показ каталога до перехода. Нужен условный рендер групп экранов.
- Стильстрока 8Все экраны в одном стеке без типизации
ParamList: ошибки в параметрах не ловятся компилятором. - Ошибкастрока 19Каталог грузится один раз при монтировании: при возврате на экран данные не обновятся.
useFocusEffectили кеш запросов с обновлением по фокусу. - Ошибкастрока 20В параметрах объект и функция: несериализуемо, ломает диплинки и восстановление состояния, вызывает предупреждение. Передать
id, а покупку делать через общее состояние корзины.
Разбор
Авторизация через условный рендер, параметры только сериализуемые и типизированные, загрузка данных привязана к фокусу или к кешу запросов.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.