Tengo una lista de botones, cada botón representa algunos datos de mi backend.
Ahora, cuando presiono dos de estos botones, necesito marcarlos y también todos los botones intermedios en rojo.
const Buttons = () => { const data = useState(getData())[0]; const [pressedButtons, setPressedButtons] = useState([]); return ({data.map((buttonData, index) => <Pressable style={{backgroundColor: pressedButtons.indexOf(index) > -1 ? "red" : "white"}} onPress={(index) => setPressedButtons(calculatePressedButtons(index))}> <Text>{buttonData.getText()}</Text> </Pressable> }); }El problema con este enfoque es que cuando tengo muchos botones como este (más de 100), cada vez que necesito actualizar un solo botón, todo el componente se vuelve a procesar, lo que resulta en una retroalimentación retrasada al presionar el botón.
He estado buscando una solución, pero las propuestas (en su mayoría con memorándum) no parecen aplicarse a mi caso. El padre aún revisa todo este mapa y vuelve a calcular los accesorios para cada botón.
¿Cómo puedo actualizar de manera eficiente los componentes para que la respuesta a los clics del botón sea instantánea?
haga que cada botón sea un componente separado y cada uno maneje su propio estado internamente. luego pase una devolución de llamada a su componente de botón y cada vez que presione el botón, además de actualizar el estado de su botón, se llamará a esa devolución de llamada. después de eso, puede usar forwardRef y useHandleImperative api para exponer su funcionalidad onclick al padre y usar ref para cada componente de botón en el padre y en la devolución de llamada que pasó en el paso anterior, especifique qué botones deben actualizarse después de que se haya hecho clic en un botón.
Creo que deberías hacer que cada botón sea un componente separado y cada uno maneje su estado internamente