#189 — May 20, 2020

Read on the Web

For the first time ever, React Status has a guest editor this week 😄 So without further ado, I hand the issue over to Terence Gannon!

React Status
Your weekly React news digest, every Wednesday

Recoil: An Experimental State Management Library for React — Interesting not only because it comes from Facebook, but because there’s a pretty good 20 minute talk about it and it follows the latest React standards out of the box.


Announcing React Native for macOS (and More) — Microsoft have been using React Native with Windows for a while now but macOS is now getting full support alongside that. Plus React Native for the Surface Duo and a variety of new modules for Windows users including WebView, Camera, and a date/time picker.

Kiki Saintonge (Microsoft)

New Course: Design Systems with Storybook & React — Learn to create a design system from scratch using React, and document the design system to share with your team using Storybook.

Frontend Masters sponsor

More Maintable Code Through Better Component Naming. Seriously? — An often overlooked or just downright neglected aspect of React development is the naming of components. There is an excellent case to be made for paying this lowly subject significantly more attention. The major benefit? Maintainability of code for one thing.

Marios Fakiolas

15 React Best Practices to Follow in 2020 — An excellent, recently updated summary of React best practices. While the site is focused on WordPress, we think that everybody will find something useful in here.


▶  Framer Motion's Matt Perry Chats with Chantastic on the React Podcast — The always engaging Matt Perry returns to the React Podcast this time to talk about the new and seriously awesome Magic Motion feature for Framer Motion. If that sounds kind of like KeyNote’s Magic Move, interesting you should ask.

React Podcast podcast

đŸ’» Jobs

Find a Job Through Vettery — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started.


â„č Interested in running a job listing in React Status? There's more info here.

📘 Tutorials and Stories

How to Build a Full Stack Serverless Application with React and Amplify — To save time and effort, mobile app developers will be increasingly tempted to delegate significant portions of their app’s functionality to cloud services like AWS’s Amplify. This tutorial shows you how.

Shadid Haque

How We Reduced Our React Native App Size by 60% with a Few Simple Fixes — A compelling story which begins with an actual case study from Mutual, a Brazilian peer-to-peer lending fintech, where the predominance of app users have low-end devices. This is the detailed story of how they significantly reduced their app size to meet the needs of this challenging but important audience.

Hugo Grochau

Conditional Rendering May Be Causing Your React Native Crashes — You may find conditional rendering in React Native causes your app to mysteriously and sporadically crash. It may seem random but it’s not: here’s an excellent, well illustrated and exemplified explanation.

Daniel Koprowski

Learn the Ionic Framework by Using the Marvel Comics API — For those who have been looking to get their feet wet with the Ionic framework, this is a great article that goes cradle-to-grave with an app which uses the Marvel Comics API (who knew?!) to create a collection of favourites.

Smashing Magazine

Building Chat With React? Stream Chat Has You Covered — Have a look at our interactive chat tutorial in React and learn how to build with Stream Chat.

Stream sponsor

▶  Get Started with React Native Using This In-Depth Video Tutorial — For those who are closer to the beginning of their React Native learning curve than the end, a two hour course by this well-regarded instructor will get you headed in the right direction.

Code With Mosh beginner

Build a Hacker News Clone with React/Redux — Although this tutorial series has been out for a while, we still like the idea of short, sharp training segments which focus on a specific, tangible objective. In this case, building a Hacker News clone.


▶  Writing a Custom Hook: useEventListener — A tight 11 minute video that explains the basic concepts well.

Harry Wolff

Still Not Using Flipper for React Native Debugging? This May Convince You — We first featured Flipper back in React Status 182. This time round we feature a deep dive into its use including a comparison with alternatives such as Remote Debugging and other debugging tools. Flipper has a number of significant disadvantages.

Lukas Kurucz

🔧 Code and Tools

Motion Layout: Create Beautiful Immersive React Hero Animations Using Shared Components — Libraries like framer-motion create animations when mounting or unmounting components. Motion Layout enables the same image with multiple routes to be animated together when changing views.

Jefferson Licet

StyCo: Instantly Tranform JSX Tags to Styled Components — If JSX tags with style props don’t provide the kind of control over appearance you need, then styled components are the way to go. StyCo for VisualStudio makes the job of transforming from one to the other a snap.

VS Market

KendoReact Just Grew to 80+ React UI Components. See What’s New

Progress KendoReact sponsor

use-memo-value: Use Memoized Value to Optimize Performance — When optimizing performance it makes sense to use a memoized value so long as that value hasn’t change. use-memo-value looks after the details for you.


ReactPivot: Up Your Data Analysis Game by Adding Pivot Tables to Your React App — Early on, quite a few people learned Microsoft Excel just so they could use the PivotTable feature. How about that capability built into your React app? This mature code enables display, filtering, and exploration of your data.

David Guttman