React Newsletter #186

Making Instagram faster, how Discord achieves native iOS performance with React Native, and why Suspense matters


Articles

Making Instagram.com faster: Part 1 - Instagram Engineering

In recent years, instagram.com has seen a lot of changes — they’ve launched stories, filters, creation tools, notifications, and direct messaging as well as myriad other features and enhancements. However, as the product grew, one unfortunate side effect was that their web performance began to suffer. Over the last year, they made a conscious effort to improve this. Their ongoing efforts have thus far resulted in almost 50% cumulative improvement to their feed page load time. This series of blog posts will outline some of the work they’ve done that led to these improvements.

How Discord achieves native iOS performance with React Native

In this article, Miguel Gaeta (from the Discord iOS team) discusses the process his team went through to improve the performance of Discord's iOS app, which they first built with React Native back in 2015. He points out the trade offs of continuing to use React Native and explains why they choose to keep investing in the platform.

Why Suspense matters, a short thread | Dan Abramov

Tl;dr about the "why" behind React Suspense from Dan Abramov. This links to a rolled-up version of Dan's original Twitter thread from Thread Reader (because readability).

Microsoft looks to React Native for cross-platform development

This article discusses how Microsoft has already begun moving away from Xamarin and .NET for cross-platform development in favor of React Native, and how they might continue to do so in 2020.


Sponsor

The Hands-on Guide to Learning React Hooks

This guide serves as an exhaustive resource on the built-in Hooks that are now part of React. Read all about them as we comprehensively cover: State and Effects, Context, Reducers, and Custom React Hooks. Start learning today.


Projects

Redux Toolkit

The official, opinionated, batteries-included toolset for efficient Redux development. Includes utilities to simplify common use cases like store setup, creating reducers, immutable update logic, and more.

Thanks Mark 😊

React Adaptive Loading Hooks & Utilities

This is a suite of React Hooks and utilities for adaptive loading based on a user's network via effective connection type, data saver preferences, device memory, and logical CPU cores. It makes it easier to target low-end devices while progressively adding high-end-only features on top, so that you give users a great experience that's best suited to their device and network constraints.

react-interactive-paycard

A fantastic credit card form with smooth and sweet micro-interactions. Includes number formatting, validation and automatic card type detection. Built with reactjs and also fully responsive


Videos

React is Fiction

You don't know it but you are an author. You write stories every day. You build narratives, characters and plots — but you aren’t writing a novel, you’re writing components. Jenn came to engineering from the world of creative writing and what surprised her the most is how similar code is to fiction. React itself follows tenants of creative writing and when you lean into those rules, you create solid component architecture. In this talk you’ll learn how to write React like its fiction and what you can gain by doing so.

React (with Hooks) from Scratch

In this talk, you’ll create an effective mental model of React Hooks by building a tiny clone of React! This will serve two purposes – to demonstrate the effective use of closures, and to show how you can build a Hooks clone in just 29 lines of readable JS. Finally, you'll arrive at how you get Custom Hooks and the Rules of Hooks out of this incredible mental model!


made with ❤️ by ui.dev