[BUG] AnimatePresence plus React Router Dom's Layout and Outlet

[b5414]

trafficstars

1. Read the FAQs 👇

Done

2. Describe the bug

It's semi of a feature request and more related to bug, I believe

So, I have the same code structure over the prod project (not in the one file, ha-ha), and I should hug Routes with your AnimatePresence because I want to use exit anim and I can't hug for example motion.div inside the layout.. (I tried hard but here I am)

The issue is header and footer are in dangerous of every page navigation (re)render

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

The CodeSandbox App

4. Steps to reproduce

Steps to reproduce the behavior:

1. Go to CodeSandbox
2. Click on Page1 / Page2
3. See every anim works alright
4. See header & footer rerenders ~~and Cry~~

5. Expected behavior

Header & footer rerenders (searching for help to prevent this)

6. Video or screenshots

Not necessary

7. Environment details

Not necessary

[vikrant845]

What if you extract header and footer in a separate component, and the 'motion.div(with Outlet)' into a separate component. By doing this whenever route changes only the component with 'motion.div(with Outlet)' will be re-rendered.

1. Header + Footer is one component.
2. motion.div(with Outlet) is one component.
3. Include (motion.div(with Outlet)) component into (Header + Footer) component.
4. Whenever route changes (motion.div(with Outlet)) component re-renders. (Header + Footer) component stays same.

[b5414]

@vikrant845 It won't change anything, it will end up with the same (you can try it)

---

There is an option to change the structure in that way, when the App outputs [Header, AnimatePresence, Footer], but this unfortunately, completely violates the Layout concept // But yeah, it will work as it should

I have reported this issue because I believe the developer can improve AnimatePresence a little so that there are no unnecessary rerenders 🙂

[mattgperry]

I don't think this is actually possible though I'm afraid. Maybe the header/footer can be memoised (React.memo) and then they wouldn't re-render when their parents do?