Ending the debate on inline functions in React – Flexport Engineering

Ending the debate on inline functions in React  #reactjs

  • In the example above, this.props.onAlert in the callback has the correct reference to this.Why do other people dislike inline functions?An inline function in render allocates a new function instance each time render is called.
  • However, in Flexport’s React app, the garbage collector penalty is dwarfed by another performance issue caused by inline functions: wasteful re-rendering of pure components.Recall from Part 1 of this blog series that pure components rely on a shallow equality comparison in shouldComponentUpdate to determine if any props or state have…
  • Since two different function instances are never equal, inline functions will cause the shallow equality comparison to fail, and thus will always trigger a re-render.
  • So as a React developer, what in the world are you supposed to do?reflective-bind to the rescueThe answer: freely use inline arrow functions in render, and use our ✨new✨ reflective-bind Babel transform to eliminate wasteful re-renders with almost no code change.Total internal reflection.
  • To do that, the Babel plugin hoists the arrow function to the top level, and replaces it with a call to reflectiveBind, passing in the hoisted function and the closed over variables as arguments:With these transforms in place, we can use reflectiveEqual in our shouldComponentUpdate to check for function equality.Performance…

Using inline functions in React is convenient but can be contentious because of their perceived impact on performance. Today Flexport is introducing our solution to the debate: a Babel transform…
Continue reading “Ending the debate on inline functions in React – Flexport Engineering”

Writing Easily Testable Code with Stateless Components in React.js

Writing Easily Testable Code with Stateless Components in #React.JS  #javascript #testing

  • The use of Stateless Functional Components (a.k.a. “pure” or “dumb” components) in React.js continues to grow since first it was released in React 0.14, and for good reasons.
  • By relying on pure components, developers end up writing reusable code that’s extremely easy to test, which leads to better application architecture.
  • Personally, I like the term “pure component” because it’s indicative of what the code really is — a pure function sprinkled with some JSX.
  • In addition to these benefits, pure components also make it extremely easy to test code with any crazy props that you wish.
  • As we just saw, the code for functional components provides us awesome intel for everything we need to know in order to write effective tests.

Functional Stateless Components provides clean syntax that allows us to write more declarative code. We will look at stateless components and finish up with some unit tests in this article.
Continue reading “Writing Easily Testable Code with Stateless Components in React.js”

Writing Easily Testable Code with Stateless Components in React.js

  • The use of Stateless Functional Components (a.k.a. “pure” or “dumb” components) in React.js continues to grow since first it was released in React 0.14, and for good reasons.
  • By relying on pure components, developers end up writing reusable code that’s extremely easy to test, which leads to better application architecture.
  • Personally, I like the term “pure component” because it’s indicative of what the code really is — a pure function sprinkled with some JSX.
  • In addition to these benefits, pure components also make it extremely easy to test code with any crazy props that you wish.
  • As we just saw, the code for functional components provides us awesome intel for everything we need to know in order to write effective tests.

Functional Stateless Components provides clean syntax that allows us to write more declarative code. We will look at stateless components and finish up with some unit tests in this article.
Continue reading “Writing Easily Testable Code with Stateless Components in React.js”

React + D3.js: Balancing Performance & Developer Experience

#ReactJS + D3.js: Balancing performance & developer experience  #JavaScript

  • The idea is still to use D3’s helpers and JSX to render SVG elements, except that now the elements rendered by React are rendered without attributes, and D3 is used to add their attributes.
  • Each of these methods can use typical D3 code to position, style, and transition elements.There are some caveats to this approach:As declared in the post introducing this idea, exit() transitions are not supported without bringing in React’s TransitionGroup.Since React does not keep track of attributes, we have to manually implement state comparison to detect when the component should update in order to call the update() method performing D3 transitions.
  • I believe this is due to the need to split the code according to the line of ownership between React and D3, instead of splitting it into logical units.Solution 3 — Feed D3 a fake DOM that renders to stateThis is the solution I found the most elegant so far, and it is what powers the demo at the beginning of this post.
  • That fake DOM is manipulated by D3 and then automatically rendered as React elements stored into the component’s state where React can pick up changes and kick-off an update, including lifecycle methods and reconciliation as you would expect.I found this approach elegant because both D3 and React are used without alienation.Except for feeding the faux DOM node to D3 instead of using a selector as you normally would, vanilla D3 code can be used.
  • Hence, you get to enjoy the typical render performance of React components.SVG elements are automatically transformed into React elements and are inspectable in the devtools.The implementation is compatible with server-side rendering, so you get isomorphic charts at no cost.Overall, this solution has restored my faith is having a great DX when using D3 visualizations in React components, while making the most out of React’s render performance.

Let’s put it out there, I love dashboards. I find the way they help you gain a rapid understanding out of complex information really interesting. I have written real-time data visualisations in the…
Continue reading “React + D3.js: Balancing Performance & Developer Experience”

Component Rendering Performance in React — Modus Create: Front End Development — Medium

  • // Stateful component class Stateful extends Component { render () { return
    Hello Cmp1: stateful

    ; } } // Pure stateful with disabled updates class Pure extends Component { shouldComponentUpdate() { return false; }

  • Pure component rendering vs stateless components
  • Pure components can dramatically improve speed by skipping render phase
  • As of React 0.14 and React 15, stateless or functional components are just as fast as regular, class-based stateful components.
  • The benchmark compares the three approaches to creating and optimizing components.

Read the full article, click here.


@MicheleBertoli: “Component Rendering Performance in #Reactjs”


React is known for performance but it doesn’t mean we can take things for granted. One of the key performance tips for faster React…


Component Rendering Performance in React — Modus Create: Front End Development — Medium