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”

Stop Managing CSS – Charlie Hulcher – Medium

Stop Managing CSS  #cssinjs #react #styledcomponents #css #http2 #reactjs

  • Stop Managing CSSA response to Managing CSS JS in a HTTP/2 WorldThis article on getting great performance out of HTTP/2 would have excited me hugely before.
  • Sane structure and tooling around SCSS that allows for the best loading benefits with HTTP/2 is definitely the future when your styles are separate from everything else.I believed in separating styles, behavior, and structure for a long time.
  • Keep style alongside behavior and structure.Coming from that context, reading about the right way to manage CSS felt like watching exciting evolution for a dated paradigm.
  • A cleaner design for a horse harness is a beautiful thing but doesn’t beat the engine.Solving the problem of chunked CSS delivery in order to get performance benefits from HTTP/2 sounds to me like reinventing the wheel from what you’re probably already doing.
  • Why rebuild that process in parallel for CSS?The core problem comes down to managing CSS inclusion/exclusion from the project through a human process.

This article on getting great performance out of HTTP/2 would have excited me hugely before. Sane structure and tooling around SCSS that allows for the best loading benefits with HTTP/2 is definitely…
Continue reading “Stop Managing CSS – Charlie Hulcher – Medium”

Sneak peek for my synchronous rendering talk in #ReactNativeEU in 2 weeks.. a working PoC! …

  • Updates made to React components from the JavaScript thread are batched together periodically and sent over the React Native bridge to be performed in the native realm (eventually on the main thread).
  • If we had some way to render components directly from the native realm without going to the JavaScript realm, we could use this ability to remove the overhead in the above scenarios.
  • In JavaScript, a React component will be registered in the exact same way under a new registry called :

    From the native side, the would support two main actions: being created and updating its props.

  • Since the React logic for the synchronous components is still defined in JavaScript, when the component is registered in (usually on JavaScript initialization), we’re going to create a serializable template recipe of how to instantiate it from native.
  • We can eventually port all the core React Native components to be part of this family, just by moving any business logic they have in JavaScript to native.

rn-synchronous-render – Experiments with synchronous rendering in React Native
Continue reading “Sneak peek for my synchronous rendering talk in #ReactNativeEU in 2 weeks.. a working PoC! …”

Container Components and Stateless Functional Components in React – Zsolt Nagy

  • Let’s introduce functional components:

    has become a function with a argument, returning the return value of the method of the original implementation.

  • Implications of the structure of stateless functional components:

    In the introduction, I mentioned that stateless functional components come with performance benefits.

  • Typically, container components have the following properties:

    The rule of thumb for choosing the appropriate syntax for React components is the following:

    then it is advised to use stateless functional components.

  • Let’s put theory into practice, and transform all the stateless component in our chat application into functional components.
  • Reviewing the conditions for modeling a component with a function, we can see that there is absolutely nothing preventing us from creating a functional equivalent of the class.

We will now introduce another way to define simple components. You will not only write less code, but you will also benefit from performance optimizations done by React. Let’s introduce functional components:
Continue reading “Container Components and Stateless Functional Components in React – Zsolt Nagy”

Navi Case Study – Mark Pinero – Medium

Navi Case Study: What you can learn from building a full-stack #ReactJS app

  • Navi Case StudyWhat I learned from building a full-stack React appThe initial idea I came up with was a meditation app that scored you based on how long you meditated each time.
  • Using Navi, the character from the Legend of Zelda: Ocarina of Time, I began with a concept of something guiding you to a better life.
  • The initial prototype worked, albeit performed poorly.Developing the API was very straight-forward since I have written it many times.
  • My initial prototype rendered equal weeks per year, but leap years ruin the implementation.
  • Implementing the initial design first would have sped up development by at least a week.Takeaways:Start with an initial design first, implement, then iterate.Server-side rendering for improved SEO and hard links.Create better algorithms, quick sort due to likely random user input, for user data functions.

The initial idea I came up with was a meditation app that scored you based on how long you meditated each time. Using Navi, the character from the Legend of Zelda: Ocarina of Time, I began with a…
Continue reading “Navi Case Study – Mark Pinero – Medium”

Announcing Meteor 1.4.4 – Meteor Blog

Announcing Meteor 1.4.4  #npm #react #nodejs #javascript #meteor #reactjs

  • Announcing Meteor 1.4.4Node.js and npm updates, Cordova Google Sign-In, and hybrid minificationToday we’re excited to announce Meteor 1.4.4, a routine incremental release to update core dependencies, fix bugs, improve stability, and address a critical Google authentication change for Cordova apps.
  • meteor directory is committed to your version-control system (e.g. Git, Subversion, etc.) so it’s easy to roll-back if you ever encounter problems during any upgrade.Node.js, npm, and node-gypAs usual with new Meteor releases, underlying dependencies of the framework have been updated to their latest versions in Meteor 1.4.4, with Node.js at 4.8.1 and npm at 4.4.4.
  • See the Node.js 4.8.1 release notes for the full details, including numerous bug fixes and performance benefits.Critical Cordova updates for Google OAuthMeteor developers with mobile apps based on Cordova, who let their users authenticate with Google OAuth (via the accounts-google, google, or google-oauth packages): please pay close attention to this section!Google announced in August 2016 that they would be blocking OAuth logins from embedded web-views (such as the WebView UI element on Android and UIWebView/WKWebView on iOS), and started displaying the following message on the iOS and Android consent pages late last year:Notice for developers: authorization requests in embedded browsers will be blocked on April 20, 2017.
  • Thank you, Seth!New export-from syntaxSpeaking of bleeding-edge ECMAScript features, Meteor 1.4.4 introduces support for two new kinds of export … from “.
  • To try the new features of Meteor 1.5, run meteor update –release 1.5-beta.14 in any application directory, though please make sure your .

Today we’re excited to announce Meteor 1.4.4, a routine incremental release to update core dependencies, fix bugs, improve stability, and address a critical Google authentication change for Cordova…
Continue reading “Announcing Meteor 1.4.4 – Meteor Blog”

Container Components and Stateless Functional Components in React – Zsolt Nagy

Container Components and Stateless Functional Components in #ReactJS:

  • Let’s introduce functional components:

    has become a function with a argument, returning the return value of the method of the original implementation.

  • Implications of the structure of stateless functional components:

    In the introduction, I mentioned that stateless functional components come with performance benefits.

  • Typically, container components have the following properties:

    The rule of thumb for choosing the appropriate syntax for React components is the following:

    then it is advised to use stateless functional components.

  • Let’s put theory into practice, and transform all the stateless component in our chat application into functional components.
  • Reviewing the conditions for modeling a component with a function, we can see that there is absolutely nothing preventing us from creating a functional equivalent of the class.

We will now introduce another way to define simple components. You will not only write less code, but you will also benefit from performance optimizations done by React. Let’s introduce functional components:
Continue reading “Container Components and Stateless Functional Components in React – Zsolt Nagy”