Tengo problemas para actualizar los datos de un componente principal dentro de un componente secundario. Estoy usando React 18.2.0 con componentes funcionales.

Para proporcionar un ejemplo de código básico para mi problema:

Padre.js

 export default function Parent() { const [counter, setCounter] = useState(0); const [stuff, setStuff] = useState([]); const [items, setItems] = useState(""); const [size, setSize] = useState(2); useEffect(() => { refresh(); }, [size]); function refresh() { let newStuff = Array(size).fill().map((_, index) => { return <Child key={index} counter={counter} items={items} setItems={setItems}/>; }); setStuff(newStuff); } } ...

Niño.js

 export default function Child({counter, items, setItems}) { useEffect(() => { refresh(); }, [counter]); function refresh() { setItems(items + "test"); } }

Entonces, para explicarlo de manera básica: tengo un padre que tiene un contador, una cadena y una matriz como useState. La matriz "cosas" tiene muchos componentes secundarios en una capa, la cadena "elementos" está aquí para ser editada desde los diferentes componentes secundarios.

El plan es incrementar manualmente (por ejemplo, haciendo clic en un botón) el "contador", de modo que useEffect en todos los componentes secundarios se active y, por lo tanto, los elementos se deban editar.

Pero el problema es que useEffect en el componente secundario no registra que el "contador" se incremente a pesar de que es una variable useState.

Entonces, ¿cómo puedo hacer esto? Tengo un componente principal que tiene un conjunto de datos modificado por muchos componentes secundarios que se encuentran en el componente principal.

¿Qué me estoy perdiendo? ¿Tengo que usar algunas otras funcionalidades de reacción (por ejemplo, useRef, useContext o algo así)?