facebook / facebook/docusaurus

Avoid layout unmount/remount

Open
#2,891 3 comments 0 reactions 0 assignees View on GitHub
difficulty: advanced domain: performance proposal
Dominant language
TypeScript
Stars
66.2k
Forks
10k
Avg merge
1d 3h
Merged PRs (30d)
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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.