#151 — August 14, 2019

Read on the Web

React Status
Your weekly React news digest, every Wednesday

React v16.9 Released and a Roadmap Update — In 16.9, the unsafe lifecycle methods (e.g. componentWillMount) have been renamed (the old names will work with warnings for now), act() will now work with async functions, and there’s a new way to get performance measurements programmatically using <React.Profiler>.

More interesting, perhaps, is the “update to the roadmap” later in the post where we find out more about the schedule for new features including concurrent mode and Suspense for data fetching which were held up by the intense work on hooks.

Dan Abramov and Brian Vaughn

useAuth: The Simplest Way to Add Auth to a React App? — Billing it as “the simplest way to add authentication to your React app”, useAuth basically integrates with Auth0, the authentication platform, to give you a lot of features ‘out of the box’. It’d be neat to see support for other providers integrated into this, however.

Swizec Teller

📕 20 Patterns to Watch for in Engineering Teams — GitPrime's new book draws together some of the most common software team dynamics, observed in working with hundreds of enterprise engineering organizations. Actionable insights to help you debug your development process with data. Get your copy.

GitPrime sponsor

▶  Realigning Your Model of React After Hooks — Recently, core team member and all round React guru Dan Abramov discussed how the addition of hooks is changing the way we write React. And if you like this, Dan went on to do a second episode with Kent on What’s Next for React.

Kent C Dodds podcast

▶  How to Build Forms in React with Formik — Forms are a fundamental part of most web apps but can be a bit of a pain to work with in vanilla React. This 20 minute walkthrough demonstrates using Formik, a form helper library, to make things much easier to manage.

Leigh Halliday

Using useReducer and useContext for Easy Global State Without Libraries — Put down your Redux and MobX for a moment.. what if you just want to share some state between some components without leaning on third party libraries or passing props around all over the place? Here’s a hook-based approach to consider.

Swizec Teller

💻 Jobs

React Developer at X-Team (Remote) — Join the most energizing community for developers. Work from anywhere with the world's leading brands.

X-Team

React Developers Are in Demand on Vettery — Ready for a bold career move? Make a free profile, name your salary, and connect with hiring managers from top employers today.

Vettery

📘 Tutorials and Stories

'Logic-Less' JSX — The opportunities that JSX provides for mixing logic and markup are significant but.. you can go too far. Here are some thoughts on how to keep things clean.

Jonathan Verrecchia

How to Build An Admin Panel with React — A practical example of using react-admin, a framework for building Material Design-styled admin panels on top of REST and GraphQL APIs.

Raphael Ugwu

Simplifying Gatsby Unit Testing using a Jest Preset

Kepler Sticka-Jones

Web Accessibility Guidebook for Developers. Learn the Best Practices — Learn more as we share useful and practical ideas to efficiently tackle key challenges in building an accessible website.

Progress KendoReact sponsor

Getting Started with 'Create React App'

Karthik Kalyanaraman

How to Shallow Render Jest Snapshot Tests“what if you could shallow render the parent component in your snapshot test to focus only on the parent component in your test; and on whether it renders instances of its child components without worrying about the whole output of the child component?”

Robin Wieruch

▶  Loading and Filtering API Data in Gatsby — It’s long (1hr20m) but Jason and Brittney walk through building a basic event listing site atop the Meetup.com API.

Jason Lengstorf and Brittney Ball

▶  Navigating the Hype-Driven Frontend Development World Without Losing It — You won’t learn a ton technically but this is a fun talk that will resonate with you if you’ve ever felt overwhelmed by the non-stop flow of new tools and technologies in our space.

React Day Berlin

🔧 Code and Tools

Divjoy: A React Codebase Generator — A Web-based tool that currently supports using Bulma, React and Firebase for putting together a simple React project in a drag-and-drop fashion.

Divjoy

Create React App 3.1 Released — A minor release that adds ESLint 6 support plus experimental support for customizing the ESLint config.

Facebook

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

Cloudinary sponsor

Inferno: A Fast, React-a-Like with a Different Approach — It’s not React, but it’s very much like it and you might be intrigued by its differences (which include a different approach to optimizing performance and lifecycle events on functional components).

Inferno

React Native HTMLView: A Component That Renders HTML Content as Native Views

James Friend

⚡️ Quick Releases