#147 — July 17, 2019

Read on the Web

React Status
Your weekly React news digest, every Wednesday

Framer Motion: Production-Ready Fluid Animations in React — If you’ve ever heard of Popmotion’s Pose, this is the open source successor to that and provides a way to create smooth animations, both simple and complex. Here’s an introductory blog post with more details.

Framer

Hermes: A New JS Engine Optimized for React Native — Hermes is a new engine released by Facebook that aims to dramatically speed up React Native apps on Android by introducing optimized build-time bytecode generation. You can opt-in to using it with React Native 0.60.2. Interested in the tech? Here's the background to how it works.

Facebook

Open-Source React Component for Engaging Forms and Surveys — Tripetto is a deeply customizable, extensible form and survey SDK for rapidly equipping applications with powerful interactions. Use its open source React component to autonomously run engaging forms inside your project - zero SaaS strings attached.

Tripetto sponsor

How I Ruined My App's Performance Using React Context Instead of Redux — While there’s an element of misusing the tools here, React-Redux provides some optimizations for ‘free’ that you need to think more directly about when using context to prevent huge amounts of pointless re-rendering.

Georges Biaux

React Conf 2019 CFP Open Until Next Monday — React Conf 2019 is taking place this October 25-26 in Las Vegas and you’ve got just a few days to get your proposal together if you want a chance of speaking there.

React Conf 2019

The MDN Web Docs Have a New React-Powered Homepage — It’s in beta now but the popular frontend developer resource site is trying a React-driven front-end.

Mozilla

Build a Chat App Using React Hooks in 100 Lines of Code — Leans on Create React App, Socket.io (for the communications), and a variety of hooks to make the front-end work. The server part is pre-built and ready to go.

Akash Joshi

💻 Jobs

Sr. Frontend Engineer - Coinbase Commerce (SF) — Make accepting cryptocurrency simple for everyone. We’re looking for a React expert with crypto curiosity to join our team of 5.

Coinbase Commerce

Land a New Dev Job on Vettery — Vettery specializes in tech roles and is completely free for job seekers.

Vettery

📘 Tutorials and Stories

Redux with Code-Splitting and Type Checking — Some pointers on getting all your ducks in a row if you want to combine using Redux with TypeScript and modern code-splitting techniques.

Matthew Gerstman

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

An Easy Way to Know When React Components Enter the Browser Viewport — learn how to use React Visibility Sensor to detect when your React components have entered the viewport.

William Le

8 Practices In React That Will Crash Your App In The Future — These are mostly JavaScript gotchas, but still fall squarely into the Just Don’t Do That™ pile.

Christopher Tran

Testing of a Custom React Hook for Fetching Data with Axios

Sebastian Weber

🔧 Code and Tools

react-native-image-crop-picker: An iOS/Android Image Picker — A mobile image picker with configurable compression, cropping multiple image support and cropping and an attempt at longest React library name 😄

Ivan Pusic

React Page Visibility: A Declarative, Isomorphic 'Page Visibility' React Component — React to your app being in the background (or invisible) so you can do things like conserve bandwidth or stop performing calculations, etc.

Gilad Peleg

React-DateTime-Picker: C'mon, You Know What It Does.. — Works with any language, uses native date formatting (instead of something like Moment.js), and is quite flexible.

Wojciech Maj

Make Your Images & Videos Load Fast & Look Beautiful with Cloudinary

Cloudinary sponsor

Search UI 1.0: Elastic-Powered Search Experiences for React Apps

elastic

react-native-picker-select: A Picker Component for React Native — It emulates the native select interfaces on both iOS and Android.

LawnStarter

react-redux-firebase: Redux Bindings for Firebase — Supports Realtime Database, Firestore, and Storage.

Scott Prue

react-stripe-elements 4.0: Components for Stripe.js and Stripe Elements — If you’re using Stripe in your checkout process, version 4 has just dropped.

Stripe