XCode 9.0: Fixing a Slow/Unresponsive iOS Simulator

Whilst initially implementing react-native-maps into a project I noticed that the iOS Simulator didn’t quite like it. Whenever the Mapview was visible on the screen, the Simulator was maxing out on something. Turns out the OpenGLES.framework that comes with XCode 9.0 – and not react-native-maps itself – is the culprit. That version is buggy and […]

Optimize React Performance

Good advice every React dev should be aware of: React is known to be blazingly fast with its Virtual DOM implementation. However, even with React’s built-in performance, there are instances when the UI can begin to feel sluggish. The primary culprit for poor performance is generating too many renders and reconciliations. We’ll cover 4 techniques […]

gpu.js – GPU Accelerated JavaScript

Amazing: gpu.js is a JavaScript library for GPGPU (General purpose computing on GPUs) in the browser. gpu.js will automatically compile specially written JavaScript functions into shader language and run them on the GPU using the WebGL API. In case WebGL is not available, the functions will still run in regular JavaScript. Only a subset of […]

Detect unnecessary renders in React with why-did-you-update

why-did-you-update is a library that hooks into React and detects potentially unnecessary component renders. It detects when a component’s render method is called despite its props their values are the same. Installation per npm, of course: npm install –save-dev why-did-you-update No need to adjust all your components either, why-did-you-update works by patching React itself: import […]

45% Faster React Stateless (Functional) Components

When using Stateless Components throughout your React app, the lifecycle events (componentWillMount, componentDidMount, etc.) are still executed. Developer Philippe Lehoux found a way to bypass these, resulting in a 45% speed improvement: What if we could skip React internals for these components? Instead of mounting them as components, let’s just call them as what they […]

Efficiently render large lists and tabular data with react-virtualized

Just like Infinity.js, but then for React. The list is windowed (or “virtualized”) meaning that only the visible rows are rendered. Less DOM nodes = better performance 🙂 Also works with rows that have different heights, something not quite common for this kind of thing. react-virtualized →

Understanding the Critical Rendering Path

When a browser receives the HTML response for a page from the server, there are a lot of steps to be taken before pixels are drawn on the screen. This sequence the browsers needs to run through for the initial paint of the page is called the “Critical Rendering Path”. Good and short writeup on […]