ElemeFE / ElemeFE/element-react

Popover: Unnecessary re-renders when document clicked

Open
#1,027 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
2.8k
Forks
435
PR merge metrics
No merged PRs in 30d

Description

### Description

All Popovers in the page re-render on document clicked, even if none are visible.
Should only render Popovers which are open and have a true state change.

### Reproduce Steps

1. Wrap a button with a Popover
2. In React DevTools enable the **Highlight updates when components render** option.
3. Click anywhere in the page and watch the button be re-rendered, regardles of whether the Popover is visible.
4. For extra proof use the Profiler flamegraph to record this action.

### Error Trace (if possible)

Not error; optimisation.

### Solution

Within document click listener, add early return if `showPopper` is already false in order to prevent setting state to false again.

### Additional Information

ElementReact version: 1.4.34

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.