title: React RadioGroup into Table Cell
body: <p>I have a page of component that having many radio button componsed with table. Like this: </p>
  
  <p><a href="https://i.stack.imgur.com/T8XKq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T8XKq.png" alt="enter image description here"></a></p>
  
  <p>I made this with Material UI's <code>RadioButton</code> and its <code>Table</code> component. It's now working  well, but the problem is it's blinking. Perhaps every time when I hit button, it calculate previous state and latest one, finally re-render whole of page. </p>
  
  <p>In typical HTML, I remember if I set <code>name</code> of element to same, I don't need any option, But In React, especially <a href="https://material-ui-next.com/demos/selection-controls/#radio-buttons" rel="nofollow noreferrer">this example</a> used <code>this.setState(...)</code> and each radio to <code>checked={this.state.selectedValue === 'value'}</code>,</p>
  
  <p>It seems to me very complicated, and the most sad point this is slow! How can I avoid whole re-rendering page? or Is there any suggestion to newbie?</p>
  
  <p>My code snippets looks like below...</p>
  
  <pre><code>&lt;TableBody&gt;
      {SIM_INSTRUCTOR_ITEMS.map((el) =&gt; {
          return (
              el.list.map((item, index) =&gt; {
                  itemRows++
                  return (
                      &lt;TableRow&gt;
                          &lt;TableCell&gt;{item.content}&lt;/TableCell&gt;
                          {item.possible.map(rating =&gt; {
                              let rowCount = itemRows-1;
                              return (
                                  &lt;TableCell key={uuidv1()}
                                             className={[classes.cell, classes.cell_center]}&gt;
                                      &lt;Radio
                                          checked={this.state.item_ratings[itemRows-1].ratingPoint == rating}
                                          onChange={ (e) =&gt; this.handleRadioChange(e, rowCount)}
                                          key={ 'radio-'+uuidv1() }
                                          value={ rating }
                                          name="radio-button"
                                          aria-label={ rating }
                                      /&gt;
                                  &lt;/TableCell&gt;
                              )
                          })}
                      &lt;/TableRow&gt;
                  )
              })
          )
      })}
  &lt;/TableBody&gt;
  </code></pre>
  
  <p>and I handle Radio Change and state like this.</p>
  
  <pre><code>handleRadioChange = (event, itemRows) =&gt; {
      const items = this.state.item_ratings;
      items[itemRows].ratingPoint = event.target.value;
      this.setState({ items })
  };
  </code></pre>
  
  <p>How can I prevent re-render whole page when I hit radio button?</p>
  
  <p>+) I heard <code>setState</code> make re-render page. Then how about using redux? If I use redux, can I prevent re-rendering?</p>