Merge pull request #117 from springload/fix/GH110-performance-issues

Make the render-prop callbacks class instance methods of each respect…

Author: ryami333

CHANGELOG.md

@@ -5,6 +5,10 @@
 
 ## Next
 
+### Fixed
+
+*   Fixes [performance issue](https://github.com/springload/react-accessible-accordion/issues/110) with not re-instantiating render-prop callbacks on each re-render.
+
 ## [[v2.4.3]](https://github.com/springload/react-accessible-accordion/releases/tag/v2.4.3)
 
 ### Fixed

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-accessible-accordion",
-  "version": "2.4.3",
+  "version": "2.4.4-beta.1",
   "description": "Accessible Accordion component for React",
   "main": "dist/umd/index.js",
   "jsnext:main": "dist/es/index.js",

package.json

@@ -37,17 +37,18 @@ class AccordionWrapper extends Component<AccordionWrapperProps> {
         this.accordionStore.setOnChange(this.props.onChange);
     }
 
-    render() {
+    renderAccordion = (accordionStore: AccordionContainer) => {
         const { accordion, onChange, ...rest } = this.props;
+        return (
+            <Accordion accordion={accordionStore.state.accordion} {...rest} />
+        );
+    };
+
+    render() {
         return (
             <Provider inject={[this.accordionStore]}>
                 <Subscribe to={[AccordionContainer]}>
-                    {accordionStore => (
-                        <Accordion
-                            accordion={accordionStore.state.accordion}
-                            {...rest}
-                        />
-                    )}
+                    {this.renderAccordion}
                 </Subscribe>
             </Provider>
         );

src/Accordion/Accordion.wrapper.js

@@ -32,20 +32,25 @@ class AccordionItemWrapper extends Component<AccordionItemWrapperProps> {
 
     static defaultProps = defaultProps;
 
+    renderItem = (
+        accordionStore: AccordionContainer,
+        itemStore: ItemContainer,
+    ) => {
+        const { uuid } = itemStore.state;
+        return (
+            <AccordionItem
+                {...this.props}
+                uuid={uuid}
+                accordionStore={accordionStore}
+            />
+        );
+    };
+
     render() {
         return (
             <Provider inject={[this.itemContainer]}>
                 <Subscribe to={[AccordionContainer, ItemContainer]}>
-                    {(accordionStore, itemStore) => {
-                        const { uuid } = itemStore.state;
-                        return (
-                            <AccordionItem
-                                {...this.props}
-                                uuid={uuid}
-                                accordionStore={accordionStore}
-                            />
-                        );
-                    }}
+                    {this.renderItem}
                 </Subscribe>
             </Provider>
         );

src/AccordionItem/AccordionItem.wrapper.js

@@ -1,34 +1,48 @@
 // @flow
 
-import React from 'react';
+import React, { Component } from 'react';
 import type { ElementProps } from 'react';
 
 import { Subscribe } from 'unstated';
 import AccordionContainer from '../AccordionContainer/AccordionContainer';
 import ItemContainer from '../ItemContainer/ItemContainer';
 import AccordionItemBody from './AccordionItemBody';
 
-const defaultProps = {
-    className: 'accordion__body',
-    hideBodyClassName: 'accordion__body--hidden',
-};
-
 type AccordionItemBodyWrapperProps = ElementProps<'div'> & {
     hideBodyClassName: string,
 };
 
-const AccordionItemBodyWrapper = (props: AccordionItemBodyWrapperProps) => (
-    <Subscribe to={[AccordionContainer, ItemContainer]}>
-        {(accordionStore, itemStore) => {
-            const { uuid } = itemStore.state;
-            const { items, accordion } = accordionStore.state;
-            const item = items.filter(stateItem => stateItem.uuid === uuid)[0];
-            return (
-                <AccordionItemBody {...props} {...item} accordion={accordion} />
-            );
-        }}
-    </Subscribe>
-);
-AccordionItemBodyWrapper.defaultProps = defaultProps;
+class AccordionItemBodyWrapper extends Component<
+    AccordionItemBodyWrapperProps,
+> {
+    static defaultProps = {
+        className: 'accordion__body',
+        hideBodyClassName: 'accordion__body--hidden',
+    };
+
+    renderItemBody = (
+        accordionStore: AccordionContainer,
+        itemStore: ItemContainer,
+    ) => {
+        const { uuid } = itemStore.state;
+        const { items, accordion } = accordionStore.state;
+        const item = items.filter(stateItem => stateItem.uuid === uuid)[0];
+        return (
+            <AccordionItemBody
+                {...this.props}
+                {...item}
+                accordion={accordion}
+            />
+        );
+    };
+
+    render() {
+        return (
+            <Subscribe to={[AccordionContainer, ItemContainer]}>
+                {this.renderItemBody}
+            </Subscribe>
+        );
+    }
+}
 
 export default AccordionItemBodyWrapper;

src/AccordionItemBody/AccordionItemBody.wrapper.js

@@ -1,40 +1,50 @@
 // @flow
 
-import React from 'react';
+import React, { Component } from 'react';
 import type { ElementProps } from 'react';
 
 import { Subscribe } from 'unstated';
 import AccordionContainer from '../AccordionContainer/AccordionContainer';
 import ItemContainer from '../ItemContainer/ItemContainer';
 import AccordionItemTitle from './AccordionItemTitle';
 
-const defaultProps = {
-    className: 'accordion__title',
-    hideBodyClassName: '',
-};
-
 type AccordionItemTitleWrapperProps = ElementProps<'div'> & {
     hideBodyClassName: string,
 };
 
-const AccordionItemTitleWrapper = (props: AccordionItemTitleWrapperProps) => (
-    <Subscribe to={[AccordionContainer, ItemContainer]}>
-        {(accordionStore, itemStore) => {
-            const { uuid } = itemStore.state;
-            const { items, accordion } = accordionStore.state;
-            const item = items.filter(stateItem => stateItem.uuid === uuid)[0];
-
-            return (
-                <AccordionItemTitle
-                    {...props}
-                    {...item}
-                    setExpanded={accordionStore.setExpanded}
-                    accordion={accordion}
-                />
-            );
-        }}
-    </Subscribe>
-);
-AccordionItemTitleWrapper.defaultProps = defaultProps;
+class AccordionItemTitleWrapper extends Component<
+    AccordionItemTitleWrapperProps,
+> {
+    static defaultProps = {
+        className: 'accordion__title',
+        hideBodyClassName: '',
+    };
+
+    renderItemTitle = (
+        accordionStore: AccordionContainer,
+        itemStore: ItemContainer,
+    ) => {
+        const { uuid } = itemStore.state;
+        const { items, accordion } = accordionStore.state;
+        const item = items.filter(stateItem => stateItem.uuid === uuid)[0];
+
+        return (
+            <AccordionItemTitle
+                {...this.props}
+                {...item}
+                setExpanded={accordionStore.setExpanded}
+                accordion={accordion}
+            />
+        );
+    };
+
+    render() {
+        return (
+            <Subscribe to={[AccordionContainer, ItemContainer]}>
+                {this.renderItemTitle}
+            </Subscribe>
+        );
+    }
+}
 
 export default AccordionItemTitleWrapper;