An error occurred while fetching folder content.
user avatar
[PC-1161] Add eslint rules to use React memoization
Nick Lanam authored
Summary:
Adds rules to enforce the use of pure components (`React.memo`, `PureComponent`) and memoization (`React.useMemo`, `React.useCallback`) to improve performance and prevent useless renders. See [this document](https://www.notion.so/pixielabs/UI-Performance-Tooling-1960f7d9c7ce440aaa5a0442eeba5815) for details on rationale.

Introducing this rule also introduces quite a few warnings in high-touch files. It also triggers a bug in the new plugin that has to be addressed before turning the plugin on. See D9661 for that fix. Other diffs for high-touch files will also submit before this one, so head off annoyingly frequent warnings before they happen.

Of note, most of the new warnings appear to be valid, but low-value to fix in terms of performance (the big ones were already fixed without this rule's help). The rules are being added for the benefit of future changes: defaulting to memoization helps us avoid writing components that can introduce new performance problems in the UI.

Test Plan: No changes to output. Large number of new eslint warnings in existing files, but the frequently-changed ones should already be addressed in other diffs.

Reviewers: michelle, vihang, #third_party_approvers

Reviewed By: vihang, #third_party_approvers

JIRA Issues: PC-1161

Differential Revision: https://phab.corp.pixielabs.ai/D9651

GitOrigin-RevId: eb5ea298ad983017d5821608cfe70538c1282bf8
ab3d2746
Name Last commit Last update