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.
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