Nav component performing slowly (bad implementation)

[oengusmacinog-zz]

Bug Report

• Package version(s): v5.82.1
• Browser and OS versions: All

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? Not now

Requested priority: Normal

Describe the issue:

Nav component performing slowly.

Actual behavior:

The mergeStyles function getClassNames being called multiple times in private methods. This was originally done because of the nested structure (Nav, Group/Accordion, Links).

Expected behavior:

Optimally this component needs a refactor that will break it up into subcomponents like NavLinks, Nav, and the styles can be broken up and applied properly. There may be a quicker solution, but I don't see one right away.

[dzearing]

1. The Nav is one component, makes no pure component optimizations. Therefore, it renders ever individual link EVERYTIME anything changes in it. We should have a composed experience, where each link is a pure component, such that changing the selected link won't re-render every other element.

2. When it was converted to use js styling, one single function (getStyles) was created to create all of these styles, and it was called in 5 different places in the function render path, including the map (getStyles evaluates on every individual item.)

If we fix #1, so that we have individual links which can be pure components, we avoid #2 and have better component design.

[aditima]

@jordandrako @oengusmacinog @mikewheaton - trying to avoid multiple assignees for better book-keeping. Please update if you need to...