https://github.com/yuriyvyatkin/ra-hw-8.1-use-effect
ДЗ №1 к лекции «hooks, Context API» курса «React» Нетологии
https://github.com/yuriyvyatkin/ra-hw-8.1-use-effect
custom-hook loading-state reactjs usefetch
Last synced: 8 months ago
JSON representation
ДЗ №1 к лекции «hooks, Context API» курса «React» Нетологии
- Host: GitHub
- URL: https://github.com/yuriyvyatkin/ra-hw-8.1-use-effect
- Owner: yuriyvyatkin
- Created: 2021-11-22T05:57:57.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-11-27T10:26:23.000Z (almost 4 years ago)
- Last Synced: 2025-01-04T01:38:57.083Z (10 months ago)
- Topics: custom-hook, loading-state, reactjs, usefetch
- Language: JavaScript
- Homepage: https://yuriyvyatkin.github.io/ra-hw-8.1-use-effect/
- Size: 676 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Домашнее задание №1 к лекции «hooks, Context API»
[](https://ci.appveyor.com/project/yuriyvyatkin/ra-hw-8-1-use-effect)
[Ссылка на Github Pages](https://yuriyvyatkin.github.io/ra-hw-8.1-use-effect/)
Список и детали
===
Вы решили потренироваться в использовании хука `useEffect` и реализовать следующее приложение - список с пользователями, при это при клике на пользователя рядом появляется окно, отображающее детальную информацию о пользователе:
При первой загрузке ни один из элементов не выбран, поэтому отображается только список:
## Механика
Назовём первый компонент (который слева) - `List`, а второй (который справа) - `Details`.
Реализуйте следующую логику:
* При загрузке приложения один раз делается запрос по адресу: https://raw.githubusercontent.com/netology-code/ra16-homeworks/master/hooks-context/use-effect/data/users.json и отрисовывается список в компоненте `List`
* При клике на конкретный элемент списка в компонент `Details` передаются один props: `info` (объект с полями `id` и `name`) и начинается загрузка данных по адресу: https://raw.githubusercontent.com/netology-code/ra16-homeworks/master/hooks-context/use-effect/data/{id}.json, где {id} - это id пользователя из props.
* На время загрузки можете отображать индикатор загрузки (протестируйте с помощью выставления ограничения пропускной способности сети в Dev Tools)
Важные момент:
1. Вся загрузка должна происходить через хук `useEffect`. Подумайте, как организовать единоразовую загрузку и загрузку при каждом изменении `props.info.id`
1. Обратите внимание, загрузка деталей должна происходить только при изменении `props.info.id`, а не при каждом рендере. Т.е. если на одного и того же пользователя кликнуть дважды, то загрузка произойдёт только в первый раз.