COMPARTIR DATOS ENTRE COMPONENTES EN REACT CON EL HOOK USECONTEXT

El hook useContext de React es una herramienta que permite compartir información entre componentes de manera fácil y sencilla. Con useContext, los componentes pueden acceder a datos y funciones desde un contexto compartido sin tener que pasar props manualmente a través de varios niveles de componentes.

Para usar el hook useContext, primero se debe crear un contexto. Esto se hace utilizando el componente React.createContext(). Por ejemplo, si queremos crear un contexto para almacenar el tema de una aplicación, lo podríamos crear de la siguiente manera:

interface Theme {
    theme: string;
}

const ThemeContext = React.createContext<Theme>({ theme: 'light' });

Luego, para que un componente pueda acceder a este contexto, se debe utilizar el hook useContext. Por ejemplo, si queremos acceder al tema actual desde un componente, lo podríamos hacer de la siguiente manera:

const MyComponent = () => {
    const { theme } = useContext(ThemeContext);
    return <div>El tema actual es { theme }</div>;
}

Para proveer valores al contexto, se debe utilizar el componente Context.Provider, este componente recibe un prop value donde se especifica el valor a proveer al contexto. Por ejemplo, si queremos cambiar el tema a "dark" desde el componente padre, lo podríamos hacer de la siguiente manera:

const App = () => {
    const [ currentTheme, setTheme ] = useState<Theme>({ theme: "light" });

    return (
        <ThemeContext.Provider value={ currentTheme }>
            <button onClick={() => setTheme({ theme: "dark" })}>Cambiar tema</button>
            <MyComponent />
        </ThemeContext.Provider>
    );
}

Ahora, cualquier componente dentro del componente <ThemeContext.Provider> tendrá acceso al valor del contexto theme.

En cuanto a cuándo usar useContext, es una herramienta ideal para compartir información entre componentes que no están relacionados directamente en la jerarquía de componentes. Por ejemplo, puede ser útil cuando se tiene un componente que maneja el estado de autenticación y se desea compartir esa información con varios componentes distintos de la aplicación. Además, useContext es una alternativa más simple a otras herramientas como redux para manejar el estado global en una aplicación de React.

Una herramienta muy útil en React para compartir información entre componentes que no están relacionados directamente en la jerarquía de componentes.