Tengo un problema con el componente de renderizado. Tengo una matriz de objetos y la muestro como una lista de mosaicos. Entonces puedo revisar algunos de ellos y hacer algo con los objetos elegidos. Creé un estado simple en el componente principal para actualizar los elementos seleccionados.

 const [selectedTable, setSelectedTable] = useState([]); const handleSelectTable = (state, item) => { if (state) { setSelectedTable((prev) => [...prev, item]); } else { setSelectedTable((prev) => prev.filter((el) => el !== item)); }

};

Después de eso, paso handleSelectTable a mi componente secundario (es un mosaico único) y luego tengo otro estado para actualizar si el mosaico único está marcado o no y cambio ese estado en onClick.

 const [isChecked, setIsChecked] = useState(false); //-------------------------------// onClick={() => setIsChecked(!isChecked)}

Finalmente, creé useEffect que llama a handleSelectTable cada vez que cambia el estado isChecked.

 useEffect(() => { handleSelect(isChecked, data); }, [isChecked]);

Pero desafortunadamente se llama bucle infinito. Tahats sucedió porque satate selectedTable vuelve a representar el componente principal con los componentes secundarios. Luego, el estado es Verificado de nuevo a los valores predeterminados. ¿Hay alguna posibilidad de volver a renderizar solo el componente que quiero en lugar de volver a renderizar el componente principal con todos los niños?

Gracias por tu atención.