Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Perf Tuning

React Perf Tuning

Boston ReactJS Meetup 5/25/2016

gusvargas

May 26, 2016
Tweet

More Decks by gusvargas

Other Decks in Programming

Transcript

  1. GUS

  2. MAINTAIN IDENTITY // Bad <Item onClick={() => foo()} /> !

    ! // Good <Item onClick={this.handeClick} />
  3. MAINTAIN IDENTITY // Bad <Item onClick={() => foo()} /> !

    ! // Good <Item onClick={this.handeClick} />
  4. MAINTAIN IDENTITY // Bad <Item onClick={this.handleClick.bind( null, item.id )} />

    // Good <Item id={item.id} onClick={this.handleClick} /> ! !
  5. MAINTAIN IDENTITY // Bad <Item onClick={this.handleClick.bind( null, item.id )} />

    // Good <Item id={item.id} onClick={this.handleClick} /> ! !
  6. MAINTAIN IDENTITY // Bad <Item onClick={this.handleClick.bind( null, item.id )} />

    // Good <Item onClick={this.partial( this.handleClick, item.id )} /> !
  7. MAINTAIN IDENTITY // Bad <User friends={user.friends || []} /> !

    // Good (defaultProps) <User friends={user.friends} />
  8. MAINTAIN IDENTITY // Bad <User friends={user.friends || []} /> !

    // Good (getDefaultProps) <User friends={user.friends} />
  9. IMMUTABILITY // Bad handleAddItem(item) { this.state.items.push(item); this.setState({ items: this.state.items });

    } ! // Good handleAddItem(item) { this.setState({ items: this.state.items.concat(item) }); }
  10. ABSTRACTION BOUNDARIES render() { return ( <div> <input type="text" onChange={this.handleChange}

    value={this.props.todoInputValue} /> <ul> {this.props.todos.map(todo => ( <Todo todo={todo} /> ))} </ul> </div> ); }
  11. react-constant-elements var foo = <div className="foo" />; function render() {

    return foo; } https://github.com/facebook/react/issues/3226
  12. react-inline-elements { type: 'div', props: { className: 'foo', children: [

    bar, { type: Baz, props: { }, key: 'baz', ref: null } ] }, key: null, ref: null }
  13. [1, 80, 43, 201, 30, ...] … … { id:

    1, text: ‘foo', … } Connect(ListView) ListView Connect(ItemView)