A focus on React performance monitoring and optimization

#180 — March 18, 2020

React Status

Your weekly React news digest, every Wednesday

✍️ Editor's note: Well, we certainly live in 'interesting' times.. We hope you're doing as well as the situation allows and we plan to keep publishing React Status as usual over the coming weeks. If you release anything, write a relevant tutorial, or even just have something you need to get out to the React community, hit reply and let us know.

React Production Performance Monitoring — Having users complaining about your app being slow 'is not a great policy', says Kent, so it's worth measuring the performance of your components in production yourself.. and luckily React provides a great way to do so.

Kent C Dodds

Implementing Infinite Scroll And Image Lazy Loading — A tutorial on using the Intersection Observer API to implement infinite scrolling and image lazy loading in a functional component.

Chidi Orji

Can We Make Open Source More Sustainable? — Today, there's a huge disconnect between the value OSS projects provide and the financial compensation they receive in return: TJ VanToll on the problematic economic model of OSS and a few options to make it more sustainable. Share your thoughts.

Progress KendoReact sponsor

5 Recommended Tools for Optimizing React Performance — A good overview touching on Profiler, React's developer tools, Bit (who, you should note, commissioned the article), why-did-you-render and the performance timeline in Chrome.

Chidume Nnamdi

Ionic React Gets a New Landing Page — If you want to build mobile, Web and desktop apps with a mature framework, Ionic is worth checking out. Ionic React's new landing page includes live demos, plus access to sample apps which you can edit and play with in your browser (such as this music player).

Ionic

Onboarding Thousands of Users with React Native at Coinbase — An interesting look back at why Coinbase went with React Native, the challenges they encountered, and how they used React Native to increase their overall development velocity.

Ian Ownbey, Nick Cherry and Jacob Thornton

💻 Jobs

Find a Dev Job Through Vettery — Vettery is completely free for job seekers. Make a profile, name your salary, and connect with hiring managers from top employers.

Vettery

React + Rails Experts — Join Our Bootsrapped Remote Team — Aha! is primarily a Rails application, but we are using React to make excellent interactive experiences on top of Rails.

Aha!

📘 Tutorials and Stories

How to 'Micro Frontend' with React — If you've considered looking into a micro frontends architecture (which is a bit controversial in some circles), this detailed post might provide a starting point.

Robin Wieruch

Building a CRUD App with React Hooks and the Context API — A tutorial focused on the basics of the more modern approaches to building React apps.

Ishan Manandhar

Creating Native Components That Accept React Native Subviews — Let's say you have a native component you want to render React Native views inside.. how? "I'll show you how to make a native component which provides bottom sheet functionality to React Native and lets you render React views inside of it."

Joe Redridge (Shopify)

Faster CI/CD for All Your Software Projects Using Buildkite — See how Shopify scaled from 300 to 1500 engineers while keeping their build times under 5 minutes.

Buildkite sponsor

A Sneak Peek at React Router v6

William Le

Setting up OAuth in a Next.js App with Passport and GitHub

Danstan Onyango

An Illustrated Introduction to React Native Testing — Rachel Nabors worked with Vojtech Novak to illustrate this introductory guide to testing for new React Native devs. Rachel adds that this "makes a great intro, regardless of your tech stack".

Facebook

How to Show and Hide Elements in React — Explores how to render or not render elements in React despite that JSX doesn't have if statements.

Leigh Halliday

Road to React: A Comprehensive (Paid) Book for React Beginners — I try to avoid linking to paid guides directly where possible, but Robin's work has been widely celebrated in the community. (Note: This is not an ad!)

Robin Wieruch

🔧 Code and Tools

React-Reverse-Portal 2.0: Build An Element Once, Move It Anywhere — Reverse portals do the opposite of React's usual portals (which let you send the rendered output of an element to a DOM node of your choice) .. so you can pull rendered elements from elsewhere into a location within your React tree.

HTTP Toolkit

classnames-components: A CSS Class Component Wrapper for Faster Styling — This CodeSandbox example will help you get the idea.

madewithlove

Check Now to See If Your .TECH Domain Is Available

.TECH DOMAINS sponsor

react-teleporter: 'Teleport' React Components in the Same Tree — There's a demo of it in action here.

Greg Bergé

react-svg-pan-zoom: Add Pan and Zoom Features to SVGs

Christian Vadalà