Discussion on: How to make routable modals in react with react-router

[JeremyColton]

Hi, great article. One problem.

You wrote 'whenever we want to navigate to a modal, we set the background state to tell react-router that we do not want to leave the current page but JUST display the modal as an overlay'.

This implies when a contact is selected, JUST the modal is displayed. BUT, the parent /contacts path is also rendered AGAIN. This is wasteful since the parent hasn't changed. How can we stop the parent from being re-rendered?

I tried memo-izing the parent 'Contacts' component but it still gets re-rendered.

Many thanks.

[Austin Murphy]

I don't think you can avoid re rendering parent but you can memoize the components on parent as you attempted. It should work fine. You can:

const ContactsMemo = useMemo(() => <Contacts />, []);

<Parent>
  {ContactsMemo}
<Parent>