How to stop re-rendering of child component when its parent's props change?

Question

I have a Modal that is a child of a Card component:

Card > Modal

The Card has props that it sends down to the Modal . When I select an option in the Modal 's UI, it updates the data in the Card and, thus, re-renders the Card , closing the Modal as it does so.

This is not ideal because I would like the user to continue to use the Modal until they explicitly hit "close".

Is there a way to update the data/state in the underlying Card (so that the Modal can use the new state), but NOT trigger a full re-render of the component tree until the Modal is finally closed?

There is no Redux involved right now, and I'd like to avoid it if possible.

Answer 1

Whenever a state is updated, all components that use the state and its children are re-rendered. You should probably use react portals to achieve what you need with the modal. There is a fiddle on the end of the docs link. Docs: https://reactjs.org/docs/portals.html