In questa breve guida vedremo un semplice modo per usare i due hook forniti da React createContex( ) e useContex( ).

Quando usarli

Prendiamo l’esempio in cui abbiamo un componente genitore che detiene la business logic e una serie di figli ‘presentational’ che hanno bisogno di accedere allo stato del padre per presentarlo e per l’interazione con l’utente.
Abbiamo, quindi, ad esempio:
Un componente <Parent /> che gestisce gli stati e li distribuisce a un componente <ChildA /> che a sua volta devi distribuirli di nuovo ai suoi figli e così via. Ci sono componenti intermedi che devono ereditare stati solo per passarli ai propri figli (e questi componenti subiranno dei render inutili ogni volta che queste proprietà cambieranno). Siamo quindi di fronte ad un problema di prop drilling.

Per questo ci vieni in aiuto il Contex di React come riportato nella documentazione ufficiale infatti:

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

https://it.reactjs.org/docs/context.html

createContex( )

Per prima cosa creiamo il contex attraverso l’hook createContex( ) come argomento possiamo passare lo “stato iniziale”. Tuttavia in questo esempio passiamo un oggetto vuoto.

import React, { createContext } from 'react';

export const MyContext = createContext({});

Successivamente wrappiamo il componente Padre con il contex appena creato per far si che tutti i componenti figli possano accedere al contex.

//Parent.js
import React, { createContext, useState } from 'react';
import { StyleSheet, View } from 'react-native';

import ChildA from './ChildA';
import ChildB from './ChildB';

export const MyContext = createContext({});

const Parent = () => {
  const [value, setValue] = useState();
  return (
      <MyContext.Provider value={{ value, setValue }}>
        <View style={styles.container}>
          <ChildA />
          <ChildB />
        </View>
      </TodosContext.Provider>
  );
};

export default Parent;

Come possiamo notare abbiamo wrappato il componente Parent.js con <MyContext.Proveder > e alla prop value passiamo i dati che vogliamo rendere accessibili tramite il context. In questo semplice esempio passiamo uno stato e il suo setter.

A questo punto vogliamo semplicemente che ChildA visualizzi il value mentre il ChildB cambi quel valore.

useContext( )

Per accedere a value e setValue utilizziamo l’hook useContext( ) come nel seguente esempio:

//ChildA.js
import React, { useContext } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { MyContext } from './Parent';

const ChildA = () => {
  const { value } = useContext(MyContext);
  return (
    <View style={styles.container}>
      <Text style={styles.labelComponent}>Child A</Text>
      <Text style={styles.text}>Numero:</Text>
      <Text style={styles.text}>{value}</Text>
    </View>
  );
};

export default ChildA;

Come parametro dell’useContext passiamo il contesto a cui vogliamo accedere e tramite destructuring recuperiamo value che a questo punto possiamo utilizzarlo.

Analogamente facciamo la stessa cosa per il setValue nel componente ChildB:

//ChildB.js
import React, { useContext } from 'react';
import { StyleSheet, View, Text, Button } from 'react-native';
import { MyContext } from './Parent';

const ChildB = () => {
  const { setValue } = useContext(MyContext);
  return (
    <View style={styles.container}>
      <Text style={styles.labelComponent}>Child B</Text>
      <Button title="Genera Numero" onPress={() => setValue(Math.random())} />
    </View>
  );
};

export default ChildB;

Conclusioni

Questo appena illustrato è un approccio molto semplice per utilizzare la Context API, tuttavia contex offre molte altre funzionalità che permette anche di utilizzare reducer e dispatching di azioni come nel pattern Redux. A mio avviso, quindi, le Contex API sono perfette quando la problematica è legata ad una parte dell’applicazione in cui dobbiamo condividere lo stato tra genitori, figlio e nipoti. Invece, in applicazioni di medie-grandi dimensioni, in cui abbiamo necessità di condividere lo stato tra parti diverse dell’app allora diventa complesso gestire il tutto tramite contex e forse è il caso di utilizzare Redux.