Page MenuHomePhabricator

[web] Memoize `LeftLayoutAside` component
ClosedPublic

Authored by jacek on Jul 18 2022, 4:33 AM.
Tags
None
Referenced Files
Unknown Object (File)
Thu, Jun 27, 12:08 PM
Unknown Object (File)
Wed, Jun 26, 10:57 PM
Unknown Object (File)
Sun, Jun 23, 8:04 PM
Unknown Object (File)
Sun, Jun 23, 11:00 AM
Unknown Object (File)
Fri, Jun 21, 5:14 PM
Unknown Object (File)
Fri, Jun 21, 5:14 PM
Unknown Object (File)
Fri, Jun 21, 5:13 PM
Unknown Object (File)
Fri, Jun 21, 5:08 PM

Details

Summary

Wrap LeftLayoutAside in React.memo hook to avoid unnecessary re-rendering - e.g. when opening modals.

While working on Sidebars Modal and analysing performance, I noticed that LeftLayoutAside is not memoized and re-renders every time when parent component changes (e.g. while opening modals).
As it doesn't receive any props and uses only hooks to read navigation state, it doesn't need to be re-rendered each time when parent re-renders and it can improve performance a bit.

Test Plan

Run web app and made actions on modals to confirm it doesn't re-render in React Profiler after the change. Confirmed that the component works as before.

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable