Si he entendido lo que estás preguntando, podría ser algo como esto.

 const GrandChild = ({ setParentInfo }) => { const info = [1, 2, 3]; const handleClick = () => { setParentInfo(info); }; return <button onClick={handleClick}>Set parent info</button>; }; const Sibling = ({ parentInfo }) => { return <div>{parentInfo.length}</div>; // Do whatever you need with parentInfo }; const Parent = () => { const [parentInfo, setParentInfo] = useState([]); return ( <div> <GrandChild setParentInfo={setParentInfo} /> <Sibling parentInfo={parentInfo} /> </div> ); };

Aquí no necesita contexto porque no tiene tantas capas, pero si necesita profundizar en los accesorios, use un contexto.

Si desea compartir el estado entre muchos componentes diferentes en su aplicación, y cree que pasar Estado como accesorio es "un viaje muy largo" para moverse, probablemente debería considerar algo como usar el gancho de contexto.

De cualquier manera, lo que acaba de describir parece un caso de uso simple que no necesitará contexto.

Lo que debe hacer es: En el padre, tiene [estado, setState] En el componente actual, pase setStat como accesorio al componente secundario y luego, desde el componente secundario, pase setState como accesorio al componente nieto.

Luego, en el componente nieto, puede hacer algo como: props.setState (matriz). Entonces, ahora en el componente principal, el estado de la variable se habrá actualizado con la matriz de valores del componente secundario.

Si desea pasar el estado al componente de hermanos, y por hermano asumo que se refiere al hermano del padre, entonces debe mover el estado del padre un nivel hacia arriba, digamos el padre del padre... y hacer lo que he descrito anteriormente .

Por lo tanto, cree useState en lo alto de su árbol de componentes, y pase State y setState también a los niños como accesorios, setState se pasará como función, para que pueda llamarlo en el componente nieto o en cualquier otro componente