javascript - Tree re-rendering in react -

i running code , every time click on object whole element tree re-renders.since handleclick method inside rendercard method, shouldn't element clicking 1 re-renders. thinking has individuality of the rendercard method , since each 1 not specific that's why of them re-render, should pass prop number of card want re-render?if not what's wrong?

import react 'react'; import reactdom 'react-dom'; import './index.css';  class cardnew extends react.component{      render(){         return(             <span classname={"card rank-" + this.props.rank+" "+this.props.suit+""}>                         <span classname="rank">{this.props.rank}</span>                         <span classname="suit"></span>                     </span>             );     }     }   class game extends react.component{     constructor(){         super();         this.newdeck=this.deckcreator();         this.handleclick = this.handleclick.bind(this);     }     deckcreator(){         const deckdiamonds=[];         const deckspades=[];         const deckclubs=[];         const deckhearts=[];       for(let i=0;i<13;i++){         if(i==0){             deckspades.push(['a','spades'])         }else if(i==10){             deckspades.push(['j','spades'])         }else if(i==11){             deckspades.push(['q','spades'])         }else if(i==12){             deckspades.push(['k','spades'])         }else{         deckspades.push([i+1,'spades'])         }       }       for(let k=0;k<13;k++){         if(k==0){             deckdiamonds.push(['a','diams'])         }else if(k==10){             deckdiamonds.push(['j','diams'])         }else if(k==11){             deckdiamonds.push(['q','diams'])         }else if (k==12) {             deckdiamonds.push(['k','diams'])         }else{         deckdiamonds.push([k+1,'diams'])         }          }       for(let l=0;l<13;l++){         if(l==0){             deckclubs.push(['a','clubs'])         }else if(l==10){             deckclubs.push(['j','clubs'])         }else if(l==11){             deckclubs.push(['q','clubs'])         }else if (l==12) {             deckclubs.push(['k','clubs'])         }else{         deckclubs.push([l+1,'clubs'])       }     }          for(let m=0;m<13;m++){         if(m==0){             deckhearts.push(['a','hearts'])         }else if(m==10){             deckhearts.push(['j','hearts'])         }else if(m==11){             deckhearts.push(['q','hearts'])         }else if (m==12) {             deckhearts.push(['k','hearts'])         }else{         deckhearts.push([m+1,'hearts'])       }       }       return deckdiamonds.concat(deckspades,deckclubs,deckhearts);     }        handleclick(i){             this.setstate({rank:1 ,suit:2})             console.log('yo' + this.state);     }      carddraw(deck){      let cut=math.floor((math.random() * deck.length) + 0);     let card=deck.splice(cut, 1);     console.log('ya' + this.state);     return card;     }      rendercard(i){           const newcard=this.carddraw(this.newdeck);                 return(                 <button onclick={this.handleclick}>                     <span classname="playingcards simplecards">                         <cardnew rank={newcard[0][0]} suit={newcard[0][1]}/>                                         </span>                 </button>);      }      render() {     return (       <span>         <span classname="opponent-hand">           {this.rendercard(1)}             {console.log('yei')}           {this.rendercard(2)}                     {this.rendercard(3)}           {this.rendercard(4)}           {this.rendercard(5)}         </span>         <div classname="my-hand">           {this.rendercard(6)}           {this.rendercard(7)}           {this.rendercard(8)}           {this.rendercard(9)}           {this.rendercard(0)}         </div>       </span>     );   } }  reactdom.render(<game />, document.getelementbyid("root")); 

some info: logs used identify problem, disregard them. know there may anti-patterns in there started last week js learning.also important know handleclick method doesn't , setstates object object, problem solve later

react's render functionality works this;

1. state changed via setstate.
2. react performs invisible test re-render of component state changed on "virtual dom".
3. as result of step 2, react re-renders sub components on virtual dom well. continues recursively until finds non-component element.
4. for every element re-rendered on virtual dom, react compares new result previous result.
5. if new result not match previous result, react re-renders sub component.

with in mind, consider how code feeds flow; on virtual dom render, code going re-run carddraw method, produces random result. means always produce unique outcome, , re-rendered.

if want prevent this, need store first outcome of carddraw in location can reference previous result, , therefore preserve same render of sub-components. proper place store outcome on state.

i create array of size 10 on state, , populate 10 calls carddraw. reference this.state.cards[index] whenever need retrieve drawn card.