facebook / facebook/docusaurus

Avoid layout unmount/remount

Abierto
#2,891 3 comentarios 0 reacciones 0 asignados Ver en GitHub
difficulty: advanced domain: performance proposal
Lenguaje dominante
TypeScript
Estrellas
66.2k
Forks
10k
Merge medio
1 d 3 h
PR fusionados (30 d)
52

Descripción

## 🐛 Bug Report

Most classic D2 sites will use the same layout component on every single page, apart from a few rare exceptions (like a code playground implemented with a custom page).

When navigating from one page to the other, the layout should not unmount/remount unnecessarily.

Currently, when navigating from the home page to the /docs page, the layout unmounts/remounts.

The only case I found where it does not unmount/remount is when navigating from one doc to another.

Avoiding unmounts/remounts when possible is important for 2 reasons:
- faster transition from one page to another
- avoid resetting state of the layout

Probably not urgent to work on this, just wanted to backlog it somewhere :)

Useful link: https://www.gatsbyjs.org/packages/gatsby-plugin-layout/

## To Reproduce

```
yarn docusaurus swizzle @docusaurus/theme-classic Navbar
```

Add this button somewhere in the navbar:

```
const TestButton = () => {
const [bool, setBool] = useState(false);
return (
setBool((b) => !b)}>Toggle me {String(bool)}
);
};
```

![image](https://user-images.githubusercontent.com/749374/83901615-59486280-a75b-11ea-8f68-e95f458c70df.png)

## Expected behavior

Navigating should not reset the button state

## Actual Behavior

The button state is reset

---

Edit: this is also a problem for our mobile drawer that may not animate properly on all page transitions, see https://github.com/facebook/docusaurus/discussions/11063#discussioncomment-12763738

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.