React Newsletter #132

React 16.5.0 released, how to test asynchronous data fetching on a React component, and creating a component library with React and Storybook


News

React 16.5.0 released

The CHANGELOG

A Code Sandbox you can fork


Articles

How to test asynchronous data fetching on a React component

Writing meaningful tests for your components is a hard task, to be honest. One scenario that can get quite tricky is when the component does some asynchronous work, like a network request for example. In this article you will learn a simple pattern for testing this kind of behavior in your components in a quick and robust manner.

Cache your React event listeners to improve performance

An under-appreciated concept in JavaScript is how objects and functions are references and that directly impacts React performance. In this article you'll see how, because of that, you can cache your event listeners to improve the perf of your app.


Tutorials

Create a Component Library with React and Storybook

Create modular and reusable components that can be shared across projects by building a component library with React and Storybook.

Use the New Profiler in React Developer Tools to Generate Flame Charts and Interactions

React version 16.5.0 has been released and one of the features that it supports is the new Profiler in the React Developer Tools. In this video and following blog post, you'll learn to update an existing app to React 16.5.0 and show off various features of the new Profiler.

How to get React SEO-friendly by using Next.js

SEO has become one of the most crucial points on the Internet to get a good ranking on Google and offer visibility to your website The goal for Next.js is to offer a developer experience close to what you have with a simple React application, by gaining all the benefits of a Universal App. This article is meant to demonstrate the concepts of Universal Application and how Next.js tackles it.

Streamline React Apollo and GraphQL

React Apollo seems to be the de facto method of querying GraphQL endpoints from within the React ecosystem. Their Query and Mutation components integrate easily in to a developer’s mental model of how React works. However, there are a few ways that we can simplify these components to handle 80% of our use cases with less code. This post shows how.

Implement Tree view component with ReactJS and Styled-Components

Tree view is one of the most popular components, you can see tree view everywhere from MacOS Finder or Window File Explorer or in any code editor like VSCode, Sublime Text, etc. This post walks through how to create one in React.


Projects

React Riot - A free, 48 hour online hackathon

React Riot, the biggest online React.js hackathon, takes place September 15th-16th. It's not too late to grab your team spot before the competition begins.

WatermelonDB: 🍉

Build powerful React and React Native apps that scale from hundreds to tens of thousands of records and remain fast

react-native-paper

Material Design for React Native (Android & iOS).

react-recontext

A lightweight state management using React Context API, inspired by Redux.


Videos

The Mobile Frameworks Battle | Flutter Vs React Native Vs Native App Development

Every developer has their favorite way of building an app. But if you are new in the app development field then it can be difficult to choose between Flutter, React Native, and plain Native development. They all have been prominent names in the Mobile Development field. But each of them has some pros and cons. This video explains the pros and cons of React Native and Flutter along with the traditional Native development.


made with ❤️ by ui.dev