Если вкратце
В этой статье мы создадим React-ивный хук usePosition()
для отслеживания геолокации браузера. Под капотом этот хук будет использовать методы getCurrentPosition()
и watchPosition()
нативного браузерного объекта navigator.geolocation. Финальную версию хука я опубликовал на GitHub и NPM.
Зачем создавать хук usePosition()
в принципе
Одно из важных преимуществ хуков в React-е — это возможность изолировать логически связанные фрагменты кода в одном месте (в хуке), избежав при этом необходимости смешивания логически не связанных фрагментов кода, например, в методе компонента componentDidMount()
.
Предположим, мы хотим получить координаты браузера (latitude
и longitude
) и после получения координат запросить прогноз погоды или текущую температуру в этом регионе со стороннего сервиса. Код этих двух функциональностей (получения координат и запроса температуры) в React-е часто размещают внутри одного метода componentDidMount()
. При этом в методе componentWillUnmount()
обычно "убирают" за собой, вызывая метод clearWatch() для прекращения слежки за локацией браузера. Подобный подход увеличивает размер методов, разбивает логически связанные участки кода на части (отдельно подписка и отписка от слежки за локацией браузера) и объединяет логически слабо связанные части кода в один метод (получение координат и температуры). Чтение кода затрудняется, так же как и его отладка и поддержка.
Далее мы попробуем вынести функциональность, связанную с получением координат браузера, в отдельный хук usePosition()
, чтобы избежать перечисленные выше трудности.