How to force remounting on React components

Question

Lets say I have a view component that has a conditional render   render        if  this state employed            return                lt div gt                   lt MyInput ref  job-title  name  job-title    gt               lt  div gt                   else           return                lt div gt                   lt MyInput ref  unemployment-reason  name  unemployment-reason    gt                   lt MyInput ref  unemployment-duration  name  unemployment-duration    gt               lt  div gt                       MyInput looks something like this   class MyInput extends React Component                 render            return                lt div gt                   lt input name  this props name                       ref  input                       type  text                       value  this props value    null                      onBlur  this handleBlur bind this                       onChange  this handleTyping bind this     gt               lt  div gt                       Lets say employed is true  Whenever I switch it to false and the other view renders  only unemployment-duration is re-initialized  Also unemployment-reason gets prefilled with the value from job-title  if a value was given before the condition changed    If I change the markup in the second rendering routine to something like this   render        if  this state employed            return                lt div gt                   lt MyInput ref  job-title  name  job-title    gt               lt  div gt                   else           return                lt div gt                   lt span gt Diff me  lt  span gt                   lt MyInput ref  unemployment-reason  name  unemployment-reason    gt                   lt MyInput ref  unemployment-duration  name  unemployment-duration    gt               lt  div gt                       It seems like everything works fine  Looks like React just fails to diff  job-title  and  unemployment-reason    Please tell me what I m doing wrong

User · Answer

Change the key of the component    lt Component key  1    gt       lt Component key  2    gt    Component will be unmounted and a new instance of Component will be mounted since the key has changed   edit  Documented on You Probably Don t Need Derived State      When a key changes  React will create a new component instance rather than update the current one  Keys are usually used for dynamic lists but are also useful here

User · Answer

I m working on Crud for my app  This is how I did it Got Reactstrap as my dependency   import React    useState  setState   from  react   import  bootstrap dist css bootstrap min css   import firebase from  firebase      import   LifeCrud   from     CRUD Crud   import   Row  Card  Col  Button   from  reactstrap   import InsuranceActionInput from     CRUD InsuranceActionInput    const LifeActionCreate        gt      let  newLifeActionLabel  setNewLifeActionLabel    React useState       const onCreate   e   gt        const db   firebase firestore         db collection  actions   add         label  newLifeActionLabel             alert  New Life Insurance Added        setNewLifeActionLabel              return        lt Card style    padding   15px     gt         lt form onSubmit  onCreate  gt           lt label gt Name lt  label gt           lt input           value  newLifeActionLabel            onChange  e   gt                setNewLifeActionLabel e target value                          placeholder   Name             gt            lt Button onClick  onCreate  gt Create lt  Button gt         lt  form gt       lt  Card gt            Some React Hooks in there

User · Answer

What s probably happening is that React thinks that only one MyInput  unemployment-duration  is added between the renders  As such  the job-title never gets replaced with the unemployment-reason  which is also why the predefined values are swapped  When React does the diff  it will determine which components are new and which are old based on their key property  If no such key is provided in the code  it will generate its own  The reason why the last code snippet you provide works is because React essentially needs to change the hierarchy of all elements under the parent div and I believe that would trigger a re-render of all children  which is why it works   Had you added the span to the bottom instead of the top  the hierarchy of the preceding elements wouldn t change  and those element s wouldn t re-render  and the problem would persist   Here s what the official React documentation says   The situation gets more complicated when the children are shuffled around  as in search results  or if new components are added onto the front of the list  as in streams   In these cases where the identity and state of each child must be maintained across render passes  you can uniquely identify each child by assigning it a key  When React reconciles the keyed children  it will ensure that any child with key will be reordered  instead of clobbered  or destroyed  instead of reused    You should be able to fix this by providing a unique key element yourself to either the parent div or to all MyInput elements  For example  render        if  this state employed            return                lt div key  quot employed quot  gt                   lt MyInput ref  quot job-title quot  name  quot job-title quot    gt               lt  div gt                   else           return                lt div key  quot notEmployed quot  gt                   lt MyInput ref  quot unemployment-reason quot  name  quot unemployment-reason quot    gt                   lt MyInput ref  quot unemployment-duration quot  name  quot unemployment-duration quot    gt               lt  div gt                      OR render        if  this state employed            return                lt div gt                   lt MyInput key  quot title quot  ref  quot job-title quot  name  quot job-title quot    gt               lt  div gt                   else           return                lt div gt                   lt MyInput key  quot reason quot  ref  quot unemployment-reason quot  name  quot unemployment-reason quot    gt                   lt MyInput key  quot duration quot  ref  quot unemployment-duration quot  name  quot unemployment-duration quot    gt               lt  div gt                      Now  when React does the diff  it will see that the divs are different and will re-render it including all of its  children  1st example   In the 2nd example  the diff will be a success on job-title and unemployment-reason since they now have different keys  You can of course use any keys you want  as long as they are unique   Update August 2017 For a better insight into how keys work in React  I strongly recommend reading my answer to Understanding unique keys in React js   Update November 2017 This update should ve been posted a while ago  but using string literals in ref is now deprecated  For example ref  quot job-title quot  should now instead be ref   el    gt  this jobTitleRef   el   for example   See my answer to Deprecation warning using this refs for more info

User · Answer

Use setState in your view to change employed property of state  This is example of React render engine    someFunctionWhichChangeParamEmployed isEmployed          this setState             employed  isEmployed                getInitialState           return             employed  true               render        if  this state employed            return                lt div gt                   lt MyInput ref  job-title  name  job-title    gt               lt  div gt                   else           return                lt div gt                   lt span gt Diff me  lt  span gt                   lt MyInput ref  unemployment-reason  name  unemployment-reason    gt                   lt MyInput ref  unemployment-duration  name  unemployment-duration    gt               lt  div gt

[javascript] How to force remounting on React components?

Examples related to javascript

Examples related to reactjs