Compartiendo el estado entre dos componentes que no son padre-hijo en React

En React, compartir el estado entre dos componentes que no son padre-hijo puede ser un reto, ya que React sigue el modelo de "flujos de un solo sentido" por el que los datos se pasan de los componentes padres a los hijos a través de props. Sin embargo, existen diferentes maneras de compartir el estado entre estos componentes, siendo la API Context y el uso de Redux las formas más aceptadas.

API Context

La API Context permite compartir valores como estos sin tener que pasar explícitamente props a través de cada nivel del árbol de componentes. Con Context, puedes compartir el estado sin tener que moverlo a un componente padre común.

Aquí te dejo un pequeño ejemplo:

import React, { createContext, useState, useContext } from 'react';

const StateContext = createContext();

export const StateProvider = ({ children }) => {
  const [state, setState] = useState();
  
  return (
    <StateContext.Provider value={[state, setState]}>
      {children}
    </StateContext.Provider>
  );
};

export const useStateValue = () => useContext(StateContext);

Con este código, puedes usar useStateValue en cualquier componente para acceder a state y setState, sin importar el lugar dentro del árbol de componentes.

Redux

Por otro lado, tenemos a Redux. Redux es una biblioteca de gestión de estado que permite administrar y compartir el estado de una manera sencilla y eficaz. Aunque se puede utilizar API Context para compartir el estado entre componentes, si la aplicación es grande y compleja, Redux podría ser la elección correcta.

import { createStore } from 'redux';

function reducer(state = 0, action) {
  switch (action.type) {
    case 'increment':
      return state + 1
    case 'decrement':
      return state - 1
    default:
      return state
  }
}

let store = createStore(reducer);

En este ejemplo, hemos creado un almacén (store) con un estado inicial de 0. El almacén devuelve el siguiente estado dependiendo de qué acción se emita. Ahora puedes pasar el estado store y las acciones a cualquier componente que las necesite.

No hay una respuesta absoluta sobre cuándo usar API Context o Redux para compartir el estado entre componentes que no son padre-hijo en React. Depende del tamaño y la complejidad de tu aplicación, de tus necesidades y preferencias.