I have a list of buttons, each button represents some data from my backend.
Now when I press two of these buttons I need to mark them and also all buttons in between red.
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>
});
}
The problem with this approach is that when having many buttons like this (100+) whenever I need to update a single button the whole component is re-rendered which then results in a delayed feedback to pressing the button.
I've been looking for a solution, but the proposed ones (mostly with memo) don't seem to apply to my case. The parent still goes through all this map and recalculates props for each button.
How can I efficiently update the components so that the feedback to the button clicks is instant?
make each button a separate component and each one handles its own state internally. then pass a callback to your button component thet every time you pressed the button, aside from updating your button state, that callback will be called. after that you can use forwardRef and useHandleImperative api to expose your onclick functionality to the parent and using ref for every button component in the parent and in the callback you passed in the previous step specify which buttons shoud be updated afer a button has been clicked.
I think you should make each button a separate component and each one handles its state internally