How can I ensure that React creates a new instance of a component, even if the component tree has not changed?

Question

React updates its component tree based on the names of the elements in that tree.

For example:

<div>
  <MyComponent/>
</div>

And:

<div>
  <MyComponent enabled/>
</div>

...results in React using the same <MyComponent> instance (because the component name did not change). This is very useful because it ensures that internal state within the component instance persists.

See the documentation for more details.

My question: "Is there a way to force a new instance to be created in certain circumstances?"

So rather than using the same MyComponent instance, I would like a new one to be instantiated if (let's say) prop 'x' has changed.

Possible duplicate of [How to force remounting on React components?](https://stackoverflow.com/questions/35792275/how-to-force-remounting-on-react-components) — imjared, Oct 11 '18 at 16:54

imjared · Accepted Answer · 2018-10-12T16:04:24.733

4

Untested, but I think you could trick React and add the prop as a key on the component.

<div>
  <MyComponent enabled key={enabled.toString()} />
</div>

Since you're familiar with the reconciliation docs, I imagine you know what keys do already ;)

edited Oct 12 '18 at 16:04

answered Oct 11 '18 at 16:52

imjared

19,492
4
49
72

1

Wow. Missed the obvious solution. Thanks – sookie Oct 12 '18 at 09:51
1

Tested this and it works correctly. Great simple solution, and easy to overlook! – Dave Houlbrooke Jul 07 '22 at 15:50

How can I ensure that React creates a new instance of a component, even if the component tree has not changed?

1 Answers1