3 React: Routing and Hooks#3
Conversation
ChocolateNao
left a comment
ChocolateNao
left a comment
There was a problem hiding this comment.
Хорошая работа, молодец!
| <Suspense fallback={<Spinner />}> | ||
| <Outlet /> | ||
| </Suspense> |
There was a problem hiding this comment.
Здесь не ошибка, просто рекомендации/наблюдение на что обратить внимание. У тебя тут, вроде, все нормально.
Очень часто начинающие React-разработчики неправильно используют Suspense. Сам по себе он не работает, о чем часто забывают и пихают его в проект.
Only Suspense-enabled data sources will activate the Suspense component. They include:
Data fetching with Suspense-enabled frameworks like Relay and Next.js
Lazy-loading component code with lazy
Reading the value of a cached Promise with use
There was a problem hiding this comment.
Часть с роутером я взял из нашей командого проекта, я там занимался роутингом, насколько я понял: Suspense взаимодействует с React.lazy загрузкой компонентов, как раз у меня каждый компонент подгружается через - Component: lazy(() => import('@/pages/index/index')), тем самым Suspense работает
по крайней мере, в командой работе Suspense был заметнее - ведь страницы тяжелее, пока они загрузятся на мгновение-секунду появлялся Spinner
| useEffect(() => { | ||
| const page = pageId ? Number(pageId) : 1; | ||
| setCurrentPokemonPage(page); | ||
| }, [pageId]); |
There was a problem hiding this comment.
State update внутри useEffect. https://react.dev/learn/you-might-not-need-an-effect
| const response = await fetch( | ||
| `${POKEMON_BASE_API_URL}cards?name=*${query}*&image=*&pagination:page=${POKEMON_CURRENT_PAGE}&pagination:itemsPerPage=${POKEMON_PAGE_SIZE}` | ||
| ); |
There was a problem hiding this comment.
Чтобы в дальнейшем не городить длинную строчку из параметров, которая, к тому же, плохо читается, или когда (если) будут появляться опциональные параметры, можно использовать URL конструктор. Там есть удобные методы для работы с параметрами и самим адресом.
| console.error('fetchPokemon:', error); | ||
| data = error; |
There was a problem hiding this comment.
Эта ошибка дальше в компоненте нигде не обрабатывается. У тебя не будет тут null никогда, а типы говорят обратное.
2 participants
deploy
Done 27.07.2025 / deadline 28.07.2025
Score: 100/100