Есть ли способ проверить, не выполняет ли функциональный компонент ненужный повторный рендеринг?

Question

вот что я делаю

вот эти компоненты круга

const Item = (props) => {
  // console.log(props)
  const [count, setCount] = useState(0);
  console.log('aaa')
  return (
    <TouchableOpacity style={{ width: containerSize, height: containerSize, padding: PADDING, justifyContent: "center", alignItems: "center" }}
      onPress={() => {
        count == 0 ? setCount(1) : setCount(0)
      }}
    >
      <View style={[count == 0 ? { backgroundColor: '#fff' } : { backgroundColor: '#3ba39a' },
      {
        width: itemSize, height: itemSize, borderRadius: containerSize / 2,
        justifyContent: "center", alignItems: "center",
        transform: [{ rotate: '-90deg' }]
      }]} >
        <Text>{props.x}</Text>
      </View>
    </TouchableOpacity>
  )
}
const MemoizedItem = memo(Item);

и метод рендеринга

  addItem(){

    this.map = [];
    for (let col1 = 0; col1 < itemPerCol; col1++) {
      this.map[col1] = [];
      for (let row1 = 0; row1 < itemPerRow; row1++) {
        this.map[col1][row1] = <MemoizedItem x={row1} y={col1} />
      }
    }
    this.setState({ map: this.map })
  }

  renderItem() {

    return this.state.map.map((row) => {
      return row.map((item) => {
        return item;
      })
    })
  }

В идеале, когда вы нажимаете на круг, цвет меняется, а другой круг больше не рендерится. Я пытаюсь использовать памятку, как указано выше, но она все еще такая медленная. Есть ли способ улучшить производительность , и есть ли способ проверить, если не щелкнуть по кругу перерисован ?

Answer 1

Используйте useMemo для запоминания реквизитов и состояния компонента.
Передайте [ props.x, props.y, count ] для повторного рендеринга компонента только при изменении некоторых из этих значений.

import { useMemo } from 'react';
const Item = (props) => {
  const [count, setCount] = useState(0);
  return useMemo(() => (
    <TouchableOpacity>
      { console.log(`Item x${props.x}-y${props.y} render`) }
      ...
    </TouchableOpacity>
  ), [ props.x, props.y, count ]);
};

Добавление key пропуска в убедитесь, что Item компонент не будет перемонтирован.

<Item key={`x${row1}-y${col1}`} x={row1} y={col1} />