React Newsletter #284

React Native v0.66, Next.js updates, and some perf tips


Build internal tools in minutes with Retool, where visual programming meets the power of real code. [Sponsored]

Programming hasn’t fundamentally changed in a long time. Building an app usually means Googling for the right component library, debugging dependencies, rewriting a lot of boilerplate code, and figuring out where to deploy. Everything but solving the problem at hand.

Retool is a new approach: they've unified the ease of visual programming with the power and flexibility of real code. Connect to any database or API. Drag-and-drop a UI while simultaneously live programming it. Deploy instantly.

👉 Check out their free package for startups


News

React Native 0.66 released

Highlights:

  • Handle taps on views outside parent bounds on Android
  • New Bluetooth Permissions on Android
  • Better Support for Apple Silicon, Xcode 13, and iOS 15
  • Hermes 0.9.0
  • Nightly and “Commitly” Releases

Articles

Three New Next.js Features and How to Use Them

Ali Spittel writes about how AWS Amplify recently added support for three new Next.js 10 features -- incremental static regeneration, optional catch all routes, and image optimization. This article digs into what each of these features is, how to implement a fullstack app using them, and how to deploy them to AWS.

How to destroy your app performance using React contexts

The React Context API is so pleasant to work with that many people are even suggesting that we drop external state management solutions and rely on the built-in alternative instead. In this article, Vladimir Klepov writes about why this is dangerous thinking that can easily push your app’s performance down the drain if you’re not careful. He explores some of the perils of using contexts, and provides several tips to help you optimize your context usage.

Redux is Dead: Long Live Redux Toolkit

In this article, Victoria Lo gives a brief introduction to Redux and Redux Toolkit, or as the development team calls it -- "the official, opinionated, batteries-included toolset for efficient Redux development".

React Accessibility Tools – How to Build More Accessible React Apps

This article shares a few existing accessibility tools and explains how you can use them to build more accessible React applications.


Tutorials

Using SWR React Hooks With Next.js’ Incremental Static Regeneration (ISR)

When paired with ISR and Next.js’ API routes, SWR can be used to create a responsive user experience. In this tutorial, Sam Poder explains what SWR is, where to use it (and where not to), and how to build a website by using Incremental Static Regeneration.


Jobs

React Native Engineer at IGN (Remote)

IGN, the premier publisher of video game and entertainment news, is looking for a full time React Native engineer to join our team and help build out the next generation of mobile apps. If you are interested, we'd love to talk. Apply now!


Projects

React Oxide

A simple code editor that you can easily add to your React projects. Check out this 2-minute demo to see it in action.

React Importer

A modern CSV importer that provides a simple, React-based solution to the sometimes tricky problem of creating a custom CSV uploader that works seamlessly.

React-Three-Flex

Flexbox for react-three-fiber. It's created by [Poimandres](https://twitter.com/pmndrs and) based on Yoga, Facebook's open source layout engine for React Native.

React Landing Page Template

A simple React one-page landing page templates for startups, created by Issaaf Kattan.

made with ❤️ by ui.dev