Que es un contexto en React

Cuando desarrollamos aplicaciones web basada en componentes, tenemos la necesidad de compartir information o funcionalidad a diferentes componentes en diferentes niveles de profundidad.

Si bien las propiedades en React nos ofrecen la posibilidad de resolver esta problema, esta solución pierde sentido (abierto a interpretaciones) entre mas niveles de profundidad de requiera recorrer.

Por ello React of rece dos funciones para dar solución a este problema createContext y useContext .

문제a

Tenemos una aplicación que renderiza una lista de usuarios y un buscador, el cual hace una búsqueda con base en el nombre de los usuarios.

Una forma de llevar a cabo esta aplicación es teniendo un estado para el valor del campo de búsqueda y utilizar este estado para hacer el filtrado en el array de usuarios.

La estructura de la aplicación esta de la siguiente manera:

src/
├── components/
│   ├── field/
│   │   ├── index.jsx
│   │   └── field.module.css
│   ├── searcher/
│   │   ├── index.jsx
│   │   └── searcher.module.css
│   └── user/
│       ├── index.jsx
│       └── user.module.css
├── styles
├── app.jsx
└── main.jsx

Y la composicion de componentes es la siguiente

// app.jsx
<main>
  <Searcher />
</main>

// searcher.jsx
<section>
  <Field />
</section>

// field.jsx
<input />

Empecemos definiendo nuestro contexto, en este caso SearchContext .

import { createContext } from 'react';

export const SearchContext = createContext();

Ahora debemos hallar la forma en que el componenteField pueda consumir el estadosearchValue y la funciónonChangeSearch .

Para ello, utilizaremos useContext en Field de la siguiente manera:

import { useContext } from 'react';
import { SearchContext } from '~/contexts/search-context';
import styles from './field.module.css';

const Field = () => {
  const { searchValue, onChangeSearch } = useContext(SearchContext);

  return (
    <input
      type="text"
      value={searchValue}
      onChange={onChangeSearch}
      placeholder="Buscar por nombre"
      className={styles.field}
    />
  );
};

export default Field;

Como vemos es Importante pasarle como parametro el contexto que queremos consumir auseContext .

En este punto, aun no sabemos donde están definidos searchValue y onChangeSearch .

En este caso, lo propio es definir este objeto en app.jsx ya que es el componente donde se están definiendo el estado y el método que nos interesan.

Ahora para poder definir y compartir este objeto, debemos hacerlo a través de un proofedor, este proofedor se encuentra en nuestro objeto contexto que nos devolvió createContext y se utiliza de la siguiente manera:

<SearchContext.Provider value={{ value: search, onChangeSearch }}>
  <Searcher />
</SearchContext.Provider>

Como vemos nuestro proofedor tiene una propiedad llamada value la cual contiene el valor que el contexto compartirá.

El proofedor esta envolviendo al componente que queremos compartir dicha información.

De esta manera hemos logrado que Field altere el estado y se haga el filtrado de los usuarios.

Les dejo el código 결승전.

demo