Cuando se trabaja con API de contexto de React, es importante manejar los casos en los que los componentes intentan acceder al contexto fuera del proveedor. Si no lo hace, podría generar resultados no deseados o errores difíciles de rastrear.

El problema
Cuando crea un contexto usando createContext(), tiene la opción de pasar un valor predeterminado. Este valor predeterminado es lo que se devuelve si un componente intenta acceder al contexto fuera del proveedor.

• Si no pasa un valor predeterminado a createContext(), acceder al contexto fuera de un proveedor devolverá un valor indefinido.

• Si pasa un valor predeterminado (como nulo o cualquier otro valor), ese valor se devolverá cuando se acceda al contexto fuera de un proveedor.

Por ejemplo:

const PostContext = React.createContext(null); // Default value is null

En este caso, si un componente intenta acceder a PostContext sin estar incluido en un Proveedor, devolverá nulo.

La solución: un gancho personalizado con manejo de errores
Para evitar situaciones en las que se accede al contexto fuera de su proveedor, podemos crear un enlace personalizado que arroje un error si se accede al contexto incorrectamente. Esto es útil para detectar errores en las primeras etapas del desarrollo.

function usePosts() {
  const context = useContext(PostContext);

  if (context === null) {
    // checking for "null" because that's the default value passed in createContext 
    throw new Error("usePosts must be used within a PostProvider");
  }

  return context;
}

Por qué esto es importante
Si no existe ningún control de errores, acceder al contexto fuera de su proveedor podría devolver un valor nulo, indefinido o cualquier valor predeterminado que haya utilizado. Esto puede provocar problemas difíciles de depurar en su aplicación. Al generar un error, es mucho más fácil detectar y solucionar el problema a tiempo.