9

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.

Improve this question
2
  • 1
    leo has your question answered but I would encourage you to go at this example in a react philosophy - try to refactor the checkbox into a separate component and then manage the checked property using this.setState. Using if statements works but is not reacty. Here's a fiddle of this as an example: jsfiddle.net/jwm6k66c/1034 Commented Sep 8, 2016 at 14:12
  • Thanks for the fiddle @erik-sn I"ll go with this approach. Commented Sep 9, 2016 at 10:36

1 Answer 1

Reset to default
20

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

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

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Correct, the Math.random() isn't necessary though?
why not? value is always the same, try it without random;-)
The value is changing between the objects in this example - but you may have another example where two checkboxes have the same value/label and without the Math.random() they won't update.
That's true, and indeed Math.random() solves that issue. Ignore my commen :)
@leo Thanks for the detailed explanation! :) And yes, I'd avoid re-rendering of components and instead follow the approach suggested by erik-sn (comment on my question)
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.