App: [Performance] [Audit] `withLocalizeHOC` recreates props at each render, causing extraneous commits

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

This report is part of #3957, scenario “Rendering Individual chat messages”.

Commit Log

The full commit log can be inspected with Flipper or React Devtools, see https://github.com/Expensify/Expensify.cash/issues/3957#issuecomment-881045715 for instructions.

I noticed that SidebarLinks component would often rerender. If you look at c72 and select SidebarLinks, you’ll notice it’s rendered 6 times during the session. 3 of those 6 commits are caused by props from withLocalizeHOC, see screenshot below:

Cause

withLocalize is a central HOC used massively throughout the App. Yet, each prop it passes (translate, numberFormat, timestampToRelative…) is an inline function recreated on each render.

https://github.com/Expensify/Expensify.cash/blob/92429b5411bc8d050e2aae157dae27da2a3d0f68/src/components/withLocalize.js#L33-L46

Proposal 1: use memoization

Make sure those props are memoized via a class component bound methods or hooks.

Proposal 2, test rendering performance of withLocalizeHOC

Test performance-critical withLocalizeHOC with react-performance-testing to enforce rendering metrics, such as number of renders in controlled conditions.

EDIT: added Proposal 2