IS REACT FAST OUT OF THE BOX?

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

Unoptimized application

OPTIMIZATIONS GOAL

• FLUID ANIMATIONS
• FAST FORMS
• 60 FPS
• REACTIVE EXPERIENCE

WHEN START OPTIMIZING

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

USING CONSOLE IN RENDER

     class MyComponent extends React.Component {
    render() {
      console.log('Rendering MyComponent');

      return (
        <div>...</div>
      );
    }
 }
  

PROFILING REACT APP

• SINCE REACT v16.5.* with React DevTools extension

HIGHLIGHT UPDATES

HIGHLIGHT UPDATES

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}
     data={invitation}
     onUpdate={this.handleUpdate}
   />
 ))}
 </div>
              

LIFECYCLE - UPDATING

• getDerivedStateFromProps
• shouldComponentUpdate
• render
• componentDidUpdate

shouldComponentUpdate

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

React PureComponent and memo

             // class style
 class MyComponent extends React.PureComponent {
   render() {
      ...
   }
 }

 // or with functional components
 const MyComponent = memo(props => (...));
        

BAD PRACTICES

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

Application with pure components

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

immer

• PLAIN, NATIVE JS DATA STRUCTURES

             import produce from "immer"
 const baseState = [{
   fruit: "Banana",
   favourite: false,
 }];
 const nextState = produce(baseState, draftState => {
   draftState.push({ fruit: "Tweet about it" });
   draftState[1].favourite = true;
 });
        

Immutable.js

• IMMUTABLE COLLECTIONS FOR JS

             const baseState = Immutable.List.of({
   fruit: "Try immer",
   favourite: false,
 });
 const nextState = list.push({
   fruit: "Banana",
   favourite: false,
 });
        

WHAT IS MEMOIZATION?

• FUNCTION WITH CACHE
• TIME-SPACE TRADE-OFF
• REFERENTIAL TRANSPARENCY

React hook - useMemo

         const expensiveCalc = length =>
  Array.from({ length }, (_v, k) => k).map(expensiveCalc);

  // inside functional component
  const { calculationsCost } = props;

  const work = useMemo(() => {
    expensiveCalc(calculationsCost);
  }, [calculationsCost]);
      

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);
          

Pure and memoized App

WHAT MORE?

• REMEMBER ABOUT PRODUCTION BUILD
• WEBPACK PLUGINS
• REUSABLE CONSTANT REACT ELEMENTS
• INLINE REACT ELEMENTS
• REACT ALTERNATIVE PREACT
• LIST AND GRID VIRTUALIZATION

FINAL THOUGHTS

• DON'T OPTIMIZE PREMATURELY
• CONTROL RENDER TREE WITH COMPOSITION
• USE IMMUTABLE STRUCTURES AND PURE FUNCTIONS

RESOURCES

• http://g3f4.xyz/optimizing-react/ (Demo app)
• https://github.com/G3F4/optimizing-react (Demo code)
• https://www.npmjs.com/package/immutability-helper
• https://www.npmjs.com/package/moize
• https://facebook.github.io/react/docs/ (React documentation)
• https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html(Profiling post)
• https://www.accelebrate.com/blog/the-real-benefits-of-the-virtual-dom-in-react-js/
• https://github.com/facebook/react/issues/3228 (Inline ReactElements)
• https://github.com/facebook/react/issues/3226 (Reuse Constant Value Types like ReactElement)
• https://www.npmjs.com/package/react-virtualized
• https://www.toptal.com/react/optimizing-react-performance

THANKS FOR
LISTENING. QUESTIONS?