#230 — March 17, 2021

Read on the Web

React Status
Your weekly React news digest, every Wednesday

Introducing Relay Hooks with Relay 11.0 — Use hooks to fetch and manage GraphQL data with the most developer-friendly version of Relay yet. Relay is a framework from Facebook for building data-driven React applications in a particularly declarative way.

Robert Balicki and Juan Tejada

Comparing Svelte and React — After spending an extended period of time working with both, the author identifies his preference based on first hand observations supported with real-world examples.

Jack Franklin

React Native: How To Build Bidirectional Infinite Scroll — Learn how to implement a smooth bidirectional infinite scroll in React Native.

Stream sponsor

Add Voice Recognition to React Native without Adding the Cloud — Quick and easy voice recognition often depends on a cloud service for implementation. However there a lots of good reasons—security, for example—why you don’t want to do it that way.

Ian Lavery

Integrating Google Maps in React — A thorough review of just about everything you need to know to incorporate a feature-rich mapping experience which many users simply expect these days.

Pavlo Chabanenko

React Clean Code Recommendations — Eight well thought out recommendations complete with code examples first showing how not to do it, followed by a new and improved version.

Tyler Hawkins

💻 Jobs

React Native Engineer (Remote) — Looking for devs with a passion for building mobile apps. No sprinting, no scrumming, work normal hours.


Find Your Next Job Through Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.


📘 Tutorials and Stories

▶  How to Make It 'Rain' with CSS Animation, React, & Styled Components — Although it’s not everyone’s cup of tea, if you want to implement the trendy ‘rain’ effect for your website, this PG-13 video goes through the steps in an entertaining and logical way. Our favorite React YouTuber right now.

Chris Power

Creating an Outside Focus and Click Handler React Component — This tutorial recreates the react-foco component as the means of teaching these important UI concepts.

Arihant Verma

How I Improved My React Native App by Making It 50x Faster — Five specific recommendations for improvements that when taken together, add up to a dramatic improvement in app performance.

Takuya Matsuyama

An Engineering Leader’s Guide to OpenTelemetry

Lightstep sponsor

Lazy Loading React Native Components from a Server — This is an innovative way of updating the content of your app without going through a dreaded app store update.

Sarath Kumar CM

The Complete Guide to useRef() and Refs in React — If you’ve found the official documentation for the useRef Hook a little terse, here is the missing manual for which you’ve been waiting.

Dmitri Pavlutin

🛠 Code and Tools

react-ssr-prepass: A Partial Server-Side React Renderer — By using a prepass and pausing until thrown promises are resolved, this library offers a practical way to use Suspense when implementing complex fetching logic.


react-avatar 1.0: A Load, Crop and Preview Component — Here’s another detail which tends to get skipped once a deadline crunch looms. Let this fully-featured component take care of it for you.

Kirill Novikov

A Better Way to Build Internal Tools — Build internal apps without the mundane, boring bits (wrestling with UI libraries or hacking together data sources & APIs).

Retool sponsor

next-sitemap: Simple Sitemap Generation for Next.js — Sitemaps quite often get skipped because they can be labour intensive to implement and maintain. Now you can automate the process.

Vishnu Sankar

Embla Carousel: Fluid Motion and Swipe Precision — Comes complete with the most comprehensive set of examples I've seen in a while.

David Cetinkaya

react-three-a11y: Accessibility for WebGL — A set of react-three-fiber components to address the requirements of an accessible user experience.


⚡️ Quick Bits:

Interesting projects which you may have missed: