Chirag Mongia Chirag Mongia - 2 months ago 30
React JSX Question

ReactJS: checkbox state persists even after re-rendering of Component

I've created a JSfiddle

In this fiddle, initially a list of checkboxes is rendered based on the

props
which are passed to the component.
On clicking the
Re-render
button, the same component is rendered with a different set of
props
.

Now, please follow the below steps-


  1. Load the jsfiddle

  2. Check any of the checkbox (let's say I check the 2nd and 3rd checkbox)

  3. Click
    Re-render
    button



Even after rendering the component with new
props
, the state of checked boxes which you checked remains unchanged (2nd and 3rd are still checked)

Why does it happen?
How can I re-render the component with new set of props such that the state of checkboxes do not persist.

leo leo
Answer

Because React's diff algorithm is smart. The conditions to rerender a new component are:

  • either the component has a different key (Different Node Types)
  • or it actually is a different HTML element (Different Keys)

Here's a working example: http://jsfiddle.net/lustoykov/ufLyy3vh/

The thing is - neither condition to rerender your input element is satisfied, so React really reuses the old input. What I've done is to generate a new key for every input element on each rerender. React assumes this is a new element because the key changes and the input gets rerendered with the correct value.


The Math.random() is necessary in order to make sure you generate different keys, it's like: Hey, React, this element has changed - please rerender it.

However, I would argue against this approach with different keys, because it is against React's philosophy. Why would you use React if you rerender the same element every single time? That's the core of React - not to rerender when the component is the same. Instead, you should use onChange handler to update only the values of your inputs without explicitly rerendering the whole input component.

Have a look how to work with React forms.