How to efficiently update array of components in React

Question

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?

Hadi · Accepted Answer · 2022-06-04 07:45:15Z

1

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.

answered Jun 4, 2022 at 7:45

Hadi

1251 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hugo Over a year ago

code exemple would be needed here

Hadi · Accepted Answer · 2022-06-02 19:14:49Z

0

I think you should make each button a separate component and each one handles its state internally

answered Jun 2, 2022 at 19:14

Hadi

1251 silver badge4 bronze badges

5 Comments

Rasmond Over a year ago

I need to update not only the button that was pressed but also the buttons between the last selected buttons (similar to selecting two files with Shift)

Hadi Over a year ago

my solution is to 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

Hadi Over a year ago

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

Hadi Over a year ago

I'm happy I coluld help you. can you please rate my answer as a true answer?

Rasmond Over a year ago

please add the info from comments to the answer, as they are the true answer (the more explained the better) and I will be happy to accept it ;)

Collectives™ on Stack Overflow

How to efficiently update array of components in React

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related