como usar contextApi en react
Tags: react, javascript, webdev, beginners
Published: 2024-03-22 17:31:55

---
title: como usar contextApi en react
published: true
description: 
tags: #react #javascript #webdev #beginners
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-03-22 17:28 +0000
---

En esta ocasión, exploraremos una funcionalidad que React nos ofrece para almacenar información y acceder a ella desde cualquier punto de nuestra aplicación. Esto nos ayuda a evitar un problema común conocido como "prop drilling", que ocurre cuando pasamos props a través de varios niveles de componentes. Esto puede resultar en que los componentes intermedios reciban props que no necesitan para su lógica, lo que puede forzar su renderización innecesaria y aumentar el costo de la aplicación.

Hoy nos enfocaremos en la utilidad de ContextAPI. Esta característica nos permite crear un estado global donde podemos almacenar información y hacer que esté disponible para cualquier componente a lo largo de la aplicación.
  
El primer paso para crear un estado global es establecer un contexto, lo cual se realiza de la siguiente manera:

``` typescript 
interface IEstado {
  estado: string,
  setEstado: () => void
}

export const MiPrimirContext = createContext<IEstado>({
  estado: '',
  setEstado: () => {}
});

```

En este código, creamos un contexto utilizando el método `createContext`. Le proporcionamos un objeto con dos propiedades: `estado` y `setEstado`, que serán los valores por defecto del estado global. Este contexto se asigna a la constante `MiPrimerContext`.

Una vez que hemos creado el contexto, el siguiente paso es crear un nuevo componente llamado `MiPrimerProvider`. Este componente será responsable de establecer el proveedor del contexto que creamos anteriormente.

```typescript

export const MiPrimirProvider = ({children}: {children: ReactNode})=> {
  const [estado, setEstado] = useState('primier Estado')
  return (
    <MiPrimirContext.Provider value={{estado, setEstado}}>
      {children}
    </MiPrimirContext.Provider>
  )
}
```

En este fragmento de código, observamos el uso del hook `useState`, el cual nos ayuda a gestionar el estado. Este componente actuará como un "HOC" (Componente de Orden Superior), lo que significa que cualquier componente anidado dentro de él tendrá acceso al estado definido.

```typescript 
import "./App.css";
import { MiPrimerProvider } from "./providers/MiPrimerProvider";
import Dashboard from "./components/dashboard";

function App() {
  return (
    <div className="relative">
      <MiPrimerProvider>
        <Dashboard />
      </MiPrimerProvider>
    </div>
  );
}

export default App;
```

En este código de la aplicación principal (`App`), se utiliza el `MiPrimerProvider` para envolver el componente `Dashboard`, asegurando así que `Dashboard` y sus componentes hijos tengan acceso al estado global proporcionado por `MiPrimerProvider`.

```typescript 
import { useContext } from "react";
import { MiPrimirContext } from "../providers/MiPrimirContext";

export default function Dashboard() {
  const { estado, setEstado } = useContext(MiPrimirContext);

  return (
    <>
	    {estado}
	    <button onClick={()=> setEstado('update State')}> updateState</button>
    </>

  );

}
```

Aquí podemos observar que el componente `Dashboard` está utilizando el contexto que creamos. Es tan simple como utilizar el hook `useContext`, pasándole como parámetro el contexto que creamos (`MiPrimirContext`). De esta manera, obtenemos acceso a los valores mantenidos por el contexto, que en este caso son `estado` y `setEstado`. Con esto, ya podemos hacer uso de ellos en nuestro componente.