Maneja datos en React sin Redux usando context

Una de las características que llegaron en las últimas versiones de React fue el contexto, una forma de pasar datos que pueden considerarse Globales a un árbol de componentes sin la necesidad de utilizar Redux.

Lo anterior quiere decir que cuando queramos compartir datos entre un árbol de componentes (componente padre, componente hijo, componente nieto…), la mejor forma de hacerlo es utilizando el context.

Para crear un nuevo contexto se hace de la siguiente manera:

import React, { Component } from 'react';
// Contexto
export const myFirstContext = React.createContext()

Con esto ya tenemos creado nuestro contexto, este contexto tiene dos componentes que nos ayudarán a pasar estos datos, el primero es el Provider el cual encerrara el componente al que le pasaremos los datos y el segundo es el Consumer el cual nos permitirá como dice su nombre consumir estos datos en cualquier componente del árbol de componentes.

La forma de utilizar estos componentes es la siguiente. Primero que todo encerramos el componente al que le pasaremos los datos dentro del componente Provider del contexto que creamos anteriormente y este componente en su propiedad value contendra el valor o los datos que queremos compartir, cabe destacar que a esta propiedad le podemos asignar cualquier tipo de valor: string, number, object, etc.

import React, { Component } from 'react';
import Family from './Family'

export const myFirstContext = React.createContext()

class App extends Component {
    constructor(...props) {
        super(...props)
        this.data = ['Carmen','Alejandro', 'Ingrid']]
    }
  render() {
    return (
      <div className="App">
        <myFirstContext.Provider value={this.data}>
          <Family/>
        </myFirstContext.Provider>
      </div>
    );
  }
}
export default App;

Para consumir estos datos utilizaremos el componente Consumer que nos provee el contexto anteriormente creado para lo cual dentro del componente Familiy renderizaremos el componente Members

import React from 'react'
import Member from './Member'

const Family = (
    <ul>
        <Member />
    </ul>
)

export default Family

y dentro de este componente Member vamos a utilizar nuestro componente Consumer

import React from 'react'
import { myFirstContext } from './App'

const Member = props => (
    <div>
        <myFirstContext.Consumer>
            {
                (data) => (
                    data.map((member,i) => (
                        <li key={i}>{member}</li>
                    ))
                )
            }
        </myFirstContext.Consumer>
    </div>
)

export default Member

Lo que estamos haciendo aqui es importar nuestro contexto que esta dentro de App y utilizar el Consumer para que dentro de este componente ejecutamos una función que recibe por parámetro los datos recibidos de nuestro contexto y como estos datos tienen como valor un array ya que asi lo especifique en el Provider, ejecuto el metodo map y renderizo estos datos.

Como pueden notar Member no es un hijo directo de nuestro componente App que es donde creamos nuestro contexto, esto es muy beneficioso por que pasamos datos a través de estos componentes sin necesidad de pasarlos explicitamente por propiedades, lo cual no es malo si son dos niveles pero en caso de que fueran 5, 6 o más niveles si seria un problema y ahi es donde ayuda de gran manera el contexto de la React.

Espero que te haya servido este artículo, te invito a leer la documentación del context.