IS REACT FAST OUT OF THE BOX?

• VIRTUAL DOM
• SLOWER THAN NATIVE JAVASCRIPT?
• SLOWER THAN JQUERY?
• MATTER OF UPDATES

UNOPTIMIZED APPLICATION

WHAT IS OUR GOAL OPTIMIZATION

• FLUID ANIMATIONS
• FAST FORMS
• 60 FPS

WHEN START OPTIMIZATION

• NOT AT THE BEGINNING
• WHEN SLOWER DEVICES MATTER
• ENCOUNTERING BOTTLE NECKS

DIAGNOSTICS

DIAGNOSTICS

USING CONSOLE IN RENDER METHOD

            
              class MyComponent extends React.Component {
                ...
                render() {
                  console.log(`Rendering ${this.constructor.name}`);
                  return (
                    < div>...< /div>
                  );
                }
                ...
              }
            
        

WHY-DID-YOU-UPDATE

https://github.com/garbles/why-did-you-update

REACT PERFORMANCE TOOLS

WASTED OPERATIONS

TIME SPENT PROCESSING COMPONENTS

DOM OPERATIONS PERFORMED

https://facebook.github.io/react/docs/perf.html

?REACT_PERF + DEV TOOLS TIMELINE

• SINCE REACT v15.4.0. USE: http://localhost:3000/?react_perf

COMPOSITION

COMPOSITION

JSX AND COMPONENTS

• CODE READABILITY
• LIFECYCLE
• CONTROLLING RENDER TREE

MAKING TEMPLATES WRONG WAY

                    
                      < div>
                      {invitations.map(invitation => (
                        < div
                          key={invitation.id}
                          < div>{invitation.number}< /div>
                          ...
                        />
                      ))}
                      < /div>
                  
                

MAKING TEMPLATES GOOD WAY

                
                  < div>
                  {invitations.map(invitation => (
                    < Invitation
                      key={invitation.id}
                      {...getInvitationProps(invitation)}
                    />
                  ))}
                  < /div>
                
              

LIFECYCLE - UPDATING

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate

shouldComponentUpdate

            
              class MyComponent extends React.Component {
                ...
                shouldComponentUpdate(nextPros, nextState) {
                  const hasPropsChanged = shallowEqual(nextProps, this.props);
                  const hasStateChanged = shallowEqual(nextState, this.state);
                  return !hasPropsChanged && !hasStateChanged;
                }
                ...
              }
            
        

APPLICATION WITH SCU

HOW NOT TO USE IT

• MUTATING STATE DIRECTLY
• PROPS BINDING FUNCTIONS
• DON'T USE EVERYWHERE

IMMUTABILITY

MUTABILITY

VS

IMMUTABILITY

MUTABLE STRUCTURES AND REACT

• IT'S HARD TO DETERMINE WHAT HAVE CHANGED
• ASSERTING DEEP STRUCTURES IS EXPENSIVE
• USING REFERENCES CAN LEAD TO ERRORS

WHY IMMUTABLE STRUCTURES

• STATE IS READ-ONLY
• UPDATING STATE CREATE NEW STATE
• SIMPLER BUGS TRACING
• STATE HISTORY

immutability-helper

• OPTIMIZE UPDATE
• SYNTACTIC SUGAR

            
                import update from 'immutability-helper';
                const newData = update(myData, {
                  x: { y: {z: { $set: 7 } } },
                  a: { b: { $push: [9] } }
                });
            
        

immutability-helper - commands

• {$push: []} push items into array
• {$unshift: []} unshift() items into array
• {$splice: [[], ...]} splice items from array
• {$set: any} set value
• {$unset: ['', ...]} remove items from array by keys
• {$merge: {}} shallow merge object
• {$apply: value=>value} function get value and return new value

https://www.npmjs.com/package/immutability-helper

MEMOIZATION

MEMOIZATION

WHAT IS MEMOIZATION?

• FUNCTION WITH MEMORY
• TIME-SPACE TRADE-OFF
• REFERENTIAL TRANSPARENCY(PURE)

MOIZE

https://www.npmjs.com/package/moize

        
            import moize from 'moize';
            const method = (a, b) => {
              return a + b;
            };
            const memoized = moize(method);
            memoized(2, 4); // 6
            memoized(2, 4); // 6, pulled from cache
        
      

MOIZE AND REACT

            
                import moize from 'moize';
                const Foo = ({bar, baz}) => {
                  return (
                    < div>
                      {bar} {baz}
                    < /div>
                  );
                };
                export default moize.react(Foo);
            
          

APPLICATION WITH SCU AND MEMOIZATION

WHAT MORE?

• REMEMBER ABOUT PRODUCTION BUILD
• WEBPACK PLUGINS
• REACT ALTERNATIVES

FINAL THOUGHTS

• DON'T OPTIMIZE PREMATURELY
• RENDER LOGIC COSTS TIME
• USE IMMUTABLE STRUCTURES AND PURE FUNCTIONS

RESOURCES

• http://g3f4.xyz/optimizing-react/
• https://github.com/G3F4/optimizing-react
• https://www.npmjs.com/package/immutability-helper
• https://www.npmjs.com/package/moize
• https://facebook.github.io/react/docs/
• https://www.accelebrate.com/blog/the-real-benefits-of-the-virtual-dom-in-react-js/

THANKS FOR
LISTENING. QUESTIONS?