feat(side-navigation): improve item rendering performance (#1449)

* feat(storybook): enables hooks in storybook

* feat(side-nav): improve update performance

* feat(side-nav): adds memo comparator prop

* feat(side-nav): adds note to docs about perf

* Update src/side-navigation/__tests__/nav-long.scenario.js

.storybook/load-stories.js

@@ -7,16 +7,16 @@ LICENSE file in the root directory of this source tree.
 /* global module */
 /* eslint-disable flowtype/require-valid-file-annotation */
 
+import React from 'react';
 import {storiesOf} from '@storybook/react';
 
 import scenarios from '../src/**/*.scenario.js';
 
-scenarios.reduce(
-  (stories, scenario) => stories.add(scenario.name, scenario.component),
-  storiesOf('baseui', module),
-);
+const light = storiesOf('baseui', module);
+const dark = storiesOf('baseui-dark', module);
 
-scenarios.reduce(
-  (stories, scenario) => stories.add(scenario.name, scenario.component),
-  storiesOf('baseui-dark', module),
-);
+scenarios.forEach(scenario => {
+  const Component = scenario.component;
+  light.add(scenario.name, () => <Component />);
+  dark.add(scenario.name, () => <Component />);
+});

documentation-site/pages/components/side-nav.mdx

@@ -69,12 +69,23 @@ const App = ({history, location}) => {
 export default withRouter(App);
 ```
 
+## Performance
+
+If you are experiencing performance issues from rendering hundreds of items, consider adding a
+comparator function through the `itemMemoizationComparator` prop. This function is provided to
+a `React.memo` call on the `NavItem` component. See React's
+[documentation](https://reactjs.org/docs/react-api.html#reactmemo) for more information on how
+this works. Take care to ensure that you diff all of the props you care about. While powerful,
+intervening in React's default update schedule can lead to unexpected results.
+
 ## Overrides
 
 <Overrides
   name="Side Navigation"
   component={NavExports}
-  renderExample={props => <Navigation items={[
+  renderExample={props => (
+    <Navigation
+      items={[
         {
           title: 'Colors',
           itemId: '#level1.1',
@@ -98,7 +109,7 @@ export default withRouter(App);
       overrides={props.overrides}
       {...props}
     />
-  }
+  )}
 />
 
 <API