1688571 - [Translate] Clicking anywhere negatively affects performance

Status: RESOLVED FIXED

(Webtools Graveyard :: Pontoon, defect, P3)

Description

[Julen Ruiz Aizpuru]

Every element making use of react-onclickoutsde via the handleClickOutside handler function forcedfully re-renders. While arguably some of the re-renders could be seen as not causing harm, the reality is everything adds up, and in some cases the re-renders also have other side-effects that delay things even more (e.g. updateFiltersFromURLParams in FiltersPanel takes ~3ms on every click in my machine).

The affected components could be made 'pure', i.e. make them shallow-compare props and state to determine if they should re-render. Another option is reworking the existing implementation of components relying on click-outside behavior so that the click-outside-specific behavior only activates when popover/modal/layered elements are rendered.

I'm more fond of this latter solution because it avoids the extra renders by design, and not by the virtue of implementing a framework escape hatch.

Comment 1

[Adrian Gaudebert]

FWIW, I agree that the second approach seems better. :-)

Comment 2

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/pontoon/pull/1833

Comment 3

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/pontoon/pull/1834

Comment 4

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/pontoon/pull/1835

Comment 5

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/pontoon/pull/1836

Comment 6

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/pontoon/pull/1837

Comment 7

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/pontoon/pull/1838

Comment 8

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/pontoon/pull/1839

Comment 9

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/pontoon/pull/1840

Comment 10

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/pontoon/pull/1841

Comment 11

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/pontoon/pull/1847

Comment 12

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/pontoon/pull/1849

Comment 13

[Matjaz Horvat [:mathjazz]]

Looks like we broke the ability to close the Resource menu when clicking outside of it:
https://github.com/mozilla/pontoon/pull/1840

Comment 14

[Julen Ruiz Aizpuru]

The main div didn't have the ref attached, I'll provide a fix in a PR.

Comment 15

[GitHub Bugzilla PR Linker]

Attachment: Link to GitHub pull-request: https://github.com/mozilla/pontoon/pull/1877