React Custom Hook: useGeolocation

Brandon Nolan

May 26, 2025

In this article, we embark on a journey through the world of custom React hooks, uncovering their immense potential to enhance your development projects. Today, we focus on the useGeolocation hook, one of many meticulously crafted hooks available in the React custom hooks collection.

import { useState, useEffect } from "react";

export default function useGeolocation(options) {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState();
  const [data, setData] = useState({});
  useEffect(() => {
    const successHandler = (e) => {
      setLoading(false);
      setError(null);
      setData(e.coords);
    };
    const errorHandler = (e) => {
      setError(e);
      setLoading(false);
    };
    navigator.geolocation.getCurrentPosition(
      successHandler,
      errorHandler,
      options
    );
    const id = navigator.geolocation.watchPosition(
      successHandler,
      errorHandler,
      options
    );
    return () => navigator.geolocation.clearWatch(id);
  }, [options]);
  return { loading, error, data };
}

The useGeolocation hook leverages React's useState and useEffect hooks to manage the loading state, errors, and geolocation data. It accepts an optional options parameter, allowing you to fine-tune the accuracy and other settings to meet your specific needs.

One of the key advantages of useGeolocation is its simplicity. By encapsulating the complex logic required to access and handle geolocation, this hook provides a straightforward and reusable solution. It automatically manages the loading state, updating it as geolocation data is retrieved, and sets an error state if any issues arise during the process.

The useGeolocation hook also utilizes the watchPosition method from the Geolocation API, enabling continuous monitoring of the user's location. This is particularly useful in scenarios requiring real-time location updates, such as tracking applications or interactive maps.

To use this hook, simply import useGeolocation into your component and destructure the loading, error, and data properties. The data object contains latitude and longitude values, making it easy to display the user's location in your UI. The loading variable informs you of the current state of the geolocation retrieval, while the error variable provides any error messages, if applicable.

import useGeolocation from "./useGeolocation";

export default function GeolocationComponent() {
  const {
    loading,
    error,
    data: { latitude, longitude },
  } = useGeolocation();
  return (
    <>
      <div>Loading: {loading.toString()}</div>
      <div>Error: {error?.message}</div>
      <div>
        {latitude} x {longitude}
      </div>
    </>
  );
}

The GeolocationComponent shown above demonstrates a basic implementation of the useGeolocation hook. It displays the loading state, any error messages, and the user's latitude and longitude values. With just a few lines of code, you can seam