facebook / facebook/docusaurus

Avoid layout unmount/remount

Đang mở
#2,891 3 bình luận 0 reaction 0 người được giao Xem trên GitHub
difficulty: advanced domain: performance proposal
Ngôn ngữ chính
TypeScript
Star
66.2k
Fork
10k
Merge trung bình
1 ngày 3 giờ
Pull request đã merge (30 ngày)
52

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.