Only render first 3 categories on first render

example/index.js

@@ -11,6 +11,7 @@ class Example extends React.Component {
       perLine: 9,
       skin: 1,
       set: 'apple',
+      hidden: false,
     }
   }
 
@@ -43,6 +44,12 @@ class Example extends React.Component {
         })}
       </div>
 
+      <div>
+        <button
+          onClick={() => this.setState({ hidden: !this.state.hidden })}
+        >{this.state.hidden ? 'Mount' : 'Unmount'}</button>
+      </div>
+
       <pre style={{
         fontSize: 18,
         display: 'inline-block',
@@ -61,13 +68,15 @@ class Example extends React.Component {
 <br /><Operator>/&gt;</Operator>
       </pre>
 
-      <Picker
-        emojiSize={this.state.emojiSize}
-        perLine={this.state.perLine}
-        skin={this.state.skin}
-        sheetURL={`../sheets/sheet_${this.state.set}_64.png`}
-        onClick={(emoji) => console.log(emoji)}
-      />
+      {!this.state.hidden &&
+        <Picker
+          emojiSize={this.state.emojiSize}
+          perLine={this.state.perLine}
+          skin={this.state.skin}
+          sheetURL={`../sheets/sheet_${this.state.set}_64.png`}
+          onClick={(emoji) => console.log(emoji)}
+        />
+      }
     </div>
   }
 }

src/components/picker.js

@@ -21,6 +21,7 @@ export default class Picker extends React.Component {
 
     this.state = {
       skin: store.get('skin') || props.skin,
+      firstRender: true,
     }
   }
 
@@ -30,6 +31,15 @@ export default class Picker extends React.Component {
     }
   }
 
+  componentDidMount() {
+    if (this.state.firstRender) {
+      setTimeout(() => {
+        if (!this.isMounted) return
+        this.setState({ firstRender: false })
+      }, 60)
+    }
+  }
+
   componentDidUpdate() {
     this.updateCategoriesSize()
     this.handleScroll()
@@ -86,6 +96,10 @@ export default class Picker extends React.Component {
   handleScrollPaint() {
     this.waitingForPaint = false
 
+    if (!this.refs.scroll) {
+      return
+    }
+
     var target = this.refs.scroll,
         scrollTop = target.scrollTop,
         scrollingDown = scrollTop > (this.scrollTop || 0),
@@ -97,14 +111,15 @@ export default class Picker extends React.Component {
           category = CATEGORIES[ii],
           component = this.refs[`category-${ii}`]
 
-      if (!minTop || component.top < minTop) {
-        if (component.top > 0) {
-          minTop = component.top
-        }
-      }
-
       if (component) {
         let active = component.handleScroll(scrollTop)
+
+        if (!minTop || component.top < minTop) {
+          if (component.top > 0) {
+            minTop = component.top
+          }
+        }
+
         if (active && !activeCategory) {
           if (category.anchor) category = category.anchor
           activeCategory = category
@@ -186,6 +201,12 @@ export default class Picker extends React.Component {
     }
   }
 
+  getCategories() {
+    var categories = CATEGORIES
+
+    return this.state.firstRender ? categories.slice(0, 3) : categories
+  }
+
   render() {
     var { perLine, emojiSize, sheetURL, style } = this.props,
         { skin } = this.state,
@@ -206,7 +227,7 @@ export default class Picker extends React.Component {
           onSearch={this.handleSearch.bind(this)}
         />
 
-        {CATEGORIES.map((category, i) => {
+        {this.getCategories().map((category, i) => {
           return <Category
             ref={`category-${i}`}
             key={category.name}