Problem

When user navigates back from Search Sidebar there’s a noticeable delay and lag in closing the Search Sidebar. It mainly arises from withNavigationFocus HOC as it re-renders the BaseOptionSelector tree including OptionsList . Adding a memo to OptionsList doesn’t help as it’s parent gets re-rendered due to the withNavigationFocus HOC.
Also, we notice that due to isFocused state value in ActionItemView the ReportActionsList re-renders which also adds the overhead to the rendering cycle as it recreates the instances of recordTimeToMeasureItemLayout and loadOlderChats which are passed as props to ReportActionsList

Solution

We can remove the withNavigationFocus HOC and add navigation listeners(focus, blur) in BaseOptionSelector and memoize OptionsListto not re-render when state is set in it’s parent. We can avoid recreating instances of recordTimeToMeasureItemLayout and loadOlderChats by wrapping them in useCallbacks and memorizing ReportActionsList.

Before on 6x CPU throttle:

See profile-ranked-before
See profile-timeline-before
See recording-before

After on 6x CPU throttle:

See profile-ranked-after
See profile-timeline-after
See recording-after

The results looks impressive as we are able to save more than 700ms for the commit that happens when we close the Search sidebar.