facebook / facebook/docusaurus

Avoid layout unmount/remount

Ouverte
#2,891 3 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
difficulty: advanced domain: performance proposal
Langage dominant
TypeScript
Étoiles
66.2k
Forks
10k
Merge moyen
1 j 3 h
PR mergées (30 j)
52

Description

## 🐛 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

Guide de contribution

Ouvrir le guide de contribution

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.