React Newsletter #94

How to greatly improve your React app performance, protected routes and authentication with React Router v4, and the performance cost of server side rendered React on Node.js


Articles

How to greatly improve your React app performance

This article tackles the following common React pitfalls: Bad shouldComponentUpdate implementations and why PureComponent won’t save you, changing the DOM too fast, and using events and callbacks without limitations.

The Performance Cost of Server Side Rendered React on Node.js

Over the last year or two rendering templates with React.js on the server has become commonplace. Services from rather static content driven sites to Universal JavaScript Applications built on frameworks like Next.js are serving dynamic of server side rendered views using React. This article examine just how much overhead there is compared to more traditional templating engines that work on strings and don’t guarantee structure of the generated HTML markup.

Protected routes and authentication with React Router v4

Protected routes are an important part of any web application. In this post you’ll break down the “Redirects (Auth)” example on the React Router documentation to learn how to create authenticated routes (routes that only certain users can access based on their authentication status) using React Router.


Projects

Want to ship better React Native apps faster? Meet App Center.

From the creators of CodePush. Ship better apps faster by connecting your app’s GitHub repo and automating the rest. After pushing new code, App Center can build your app in the cloud, test it on thousands of real iOS and Android devices, release to beta testers, app stores, or CodePush, and monitor production with crash reports and analytics. Start for free.

Introducing react-pivottable

Pivot table implementation for React.

react-native-image-cache-hoc

React Native Higher Order Component that adds advanced caching functionality to the react native Image component.

react-fns

react-fns is a collection of imperative Browser API's turned into declarative React components and higher-order components for lots of common situations.


Videos

Blasting React into Space: Building fluid interface with React and WebGL

At its heart, React is about describing a living, changing tree. We typically use it to build an HTML DOM tree, and obviously, React is written that in mind. But what if I told you that the DOM was only the beginning? Your React components can describe not just HTML, but whole WebGL scenes, letting you seamlessly integrate beautiful, GPU-accelerated interfaces into your projects. See how that works by watching this talk.


made with ❤️ by ui.dev