title: Is there anyway to check if a functional component is doing unnecessary re-rendered?
body: <p><a href="https://i.stack.imgur.com/sxmEv.png" rel="nofollow noreferrer">here is what i'm doing</a></p>
  
  <p><strong>here are those circle component</strong></p>
  
  <pre><code>const Item = (props) =&gt; {
    // console.log(props)
    const [count, setCount] = useState(0);
    console.log('aaa')
    return (
      &lt;TouchableOpacity style={{ width: containerSize, height: containerSize, padding: PADDING, justifyContent: "center", alignItems: "center" }}
        onPress={() =&gt; {
          count == 0 ? setCount(1) : setCount(0)
        }}
      &gt;
        &lt;View style={[count == 0 ? { backgroundColor: '#fff' } : { backgroundColor: '#3ba39a' },
        {
          width: itemSize, height: itemSize, borderRadius: containerSize / 2,
          justifyContent: "center", alignItems: "center",
          transform: [{ rotate: '-90deg' }]
        }]} &gt;
          &lt;Text&gt;{props.x}&lt;/Text&gt;
        &lt;/View&gt;
      &lt;/TouchableOpacity&gt;
    )
  }
  const MemoizedItem = memo(Item);
  </code></pre>
  
  <p><strong>and the render method</strong></p>
  
  <pre><code>  addItem(){
  
      this.map = [];
      for (let col1 = 0; col1 &lt; itemPerCol; col1++) {
        this.map[col1] = [];
        for (let row1 = 0; row1 &lt; itemPerRow; row1++) {
          this.map[col1][row1] = &lt;MemoizedItem x={row1} y={col1} /&gt;
        }
      }
      this.setState({ map: this.map })
    }
  
    renderItem() {
  
      return this.state.map.map((row) =&gt; {
        return row.map((item) =&gt; {
          return item;
        })
      })
    }
  </code></pre>
  
  <p>The ideal is when you click on a circle, the color change and the other circle not render again.
  I'm trying using memo like above but it still so laggy.
  Is there any way to <strong>make a better performance</strong> and is there any way to check if not clicked circle <strong>is re-rendered</strong>?</p>