Lesson 12. Custom hooks to use the browser’s APIs 6. Exercise: Get the user’s geolocation

Geolocation API also offers a way to get the user’s location in real-time via the watchPosition method. Can you update our hook also to return the new location when it changes? Don’t forget to unsubscribe from updates when the component is unmounted.

const useGeolocation = () => {
  // This implementation does not return updates for the user's position :(

  const [status, setStatus] = useState('pending')
  const [latitude, setLatitude] = useState(undefined)
  const [longitude, setLongitude] = useState(undefined)

  useEffect(() => {
    let active = true

    navigator.geolocation.getCurrentPosition(
      (res) => {
        if (active) {
          setStatus('success')
          setLatitude(res.coords.latitude)
          setLongitude(res.coords.longitude)
        }
      },
      (err) => {
        if (active) {
          console.log(err)
          setStatus('error')
        }
      }
    )

    return () => (active = false)
  }, [])

  return { status, latitude, longitude }
}

const Comp = () => {
  const { status, latitude, longitude } = useGeolocation()

  switch (status) {
    case 'pending':
      return <p>Waiting for geolocation…</p>
    case 'success':
      return (
        <p>
          Your location: ({latitude}, {longitude})
        </p>
      )
    case 'error':
      return <p>Have you authorized me to access your geolocation?</p>
  }
}

render(Comp)const useGeolocation = () => {
  // This implementation does not return updates for the user's position :(

  const [status, setStatus] = useState('pending')
  const [latitude, setLatitude] = useState(undefined)
  const [longitude, setLongitude] = useState(undefined)

  useEffect(() => {
    let active = true

    navigator.geolocation.getCurrentPosition(
      (res) => {
        if (active) {
          setStatus('success')
          setLatitude(res.coords.latitude)
          setLongitude(res.coords.longitude)
        }
      },
      (err) => {
        if (active) {
          console.log(err)
          setStatus('error')
        }
      }
    )

    return () => (active = false)
  }, [])

  return { status, latitude, longitude }
}

const Comp = () => {
  const { status, latitude, longitude } = useGeolocation()

  switch (status) {
    case 'pending':
      return <p>Waiting for geolocation…</p>
    case 'success':
      return (
        <p>
          Your location: ({latitude}, {longitude})
        </p>
      )
    case 'error':
      return <p>Have you authorized me to access your geolocation?</p>
  }
}

render(Comp)
Result

Click here to see the solution!

All you need to do is replace getCurrentPosition with watchPosition, since both functions have exactly the same API:

const useGeolocation = () => {
  const [status, setStatus] = useState('pending')
  const [latitude, setLatitude] = useState(undefined)
  const [longitude, setLongitude] = useState(undefined)

  useEffect(() => {
    navigator.geolocation.watchPosition(
      (res) => {
        setStatus('success')
        setLatitude(res.coords.latitude)
        setLongitude(res.coords.longitude)
      },
      (err) => {
        console.log(err)
        setStatus('error')
      }
    )

    return () => {
      navigator.geolocation.clearWatch()
    }
  }, [])

  return { status, latitude, longitude }
}