#194 — June 24, 2020

Read on the Web

React Status
Your weekly React news digest, every Wednesday

React Query 2.0: Hooks for Fetching, Caching and Updating Async Data — v1.0 only came out several months ago but 2.0 is here with better query invalidation and refetching, multi-instance polling and interval support, and a simplified dependent query syntax. React Query is well worth checking out now and has extensive documentation and even its own devtools. Main repo.

Tanner Linsley

Formidable Labs Builds Out urql's Offline Support Capabilities — Formidable’s urql is burnishing its reputation as a versatile, highly customizable GraphQL client, but did you know it also has robust offline support? This newly released documentation systematically walks you through normalised caching, optimistic updates & resolvers and offline persistence.

Formidable Labs

State of Frontend 2020: Take Part in the Survey — What does the everyday job of a frontend developer look like? 🤔 Which frameworks and tools do you really use? Which would you like to use but your employer won’t let you? Let’s discover the real State of Frontend 2020 together.

The Software House sponsor

When is React Not React? When It's 'Noact' — When React is your hammer, every problem out there is going to look like a nail. But there are situations where it’s not the right tool for the job. There may be better alternatives. For example, Noact incorporates React-like principles into something much simpler (only 60 lines of code, even). It could be a good place to learn first principles before venturing into full-blown React.

Hao Wang

▶  Mina Markham with Thoughts on How To Learn React — Drew McLellan talks with Mina Markham about the challenges of an experienced front-end engineer learning React. It's a fascinating and suprisingly candid conversation with a multi-talented individual known for her talks and work with organizations like Black Girls Code and Girl Develop It.

Smashing Podcast podcast

💻 Jobs

React Developer at X-Team (Remote) — Join X-Team and work on projects for companies like Riot Games, FOX, Coinbase, and more. Work from anywhere.

X-Team

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

Vettery

ℹ️ Interested in running a job listing in React Status? There's more info here.

📘 Tutorials and Stories

How to Replicate the Zelda BOTW Interface with React, Tailwind and Framer Motion — Now we're talking — if you have ever felt compelled to finally embrace your inner game dev, this is the tutorial for you. The first of a multi-part series on creating your own version of Zelda: Breath of the Wild using the same tools you use for all that other 9-to-5 stuff (React, Framer Motion, Tailwind).

Florent Lagrede

Sharing React Components Between a Web & Electron App — In yet another effort to increase the return on the time invested in building robust React components, here's how to further increase their utility by making them available to an Electron desktop app using Bit: "the platform for collaboration on atomic components".

Nathan Sebhastian

Let’s Build a Financial Dashboard App With React in 3 Steps (Tutorial) — Check out this blog by TJ VanToll to learn a few techniques that make building dashboards easier.

Progress KendoReact sponsor

How to Set Up a React Native Project Using Expo CLIExpo enables developers to take a shared JavaScript/TypeScript codebase and deploy it across a broad range of mobile devices and web apps. This tutorial methodically walks through the steps required to set up React Native project using this approach.

Reshaka Weerasinghe

Better Reducers With Immer — If writing reducers by hand has left your code with a lot of bloat, you may want to relieve the tedium and potential for errors through the use of the lightweight Immer library to simply the process.

Chidi Orji

A Deep Dive Into the React Context API — While your new application may start off with the noble goal of creating just a single component, almost inevitably there comes a time when it must be broken down into simpler building blocks. But that begets the problem of maintaining state which has its own complexities. Here are the fine details of how to simplify state management with the useContext hook.

Adebiyi Adedotun

Ways to Create Components in React — We can always relate to any sort of analogy that involves LEGO. Components are like LEGO blocks. Now it all makes sense. That said, just as not all LEGO blocks are created equal, neither are components. Here’s a clear, concise differentiation between Class and Functional components in React.

Ankit Bansal

Sorry React, But I Can’t Keep Up Anymore — Simply keeping up with the React ecosystem sometimes seems like a full-time job in itself. With refreshing candor, the author self-diagnoses ‘JavaScript Fatigue Syndrome’ and resolves to time-box his commitment.

Chris Vibert

🔧 Code and Tools

Code Notes: A Gatsby Theme for Publishing Code-Related Notes and Snippets — If you’ve got a bunch of code snippets you want to keep collected together and present in an attractive fashion, this is a neat Gatsby and Markdown/MDX powered approach. Here’s an example site (which has lots of React snippets on it – bonus)

Zander Martineau

Beautiful React Hooks: A Collection of Custom React HooksBeautiful Interactions has been building up its library of custom React hooks for some time. It will speed and simplify your development by enabling the abstraction of components’ business logic.

Beautiful Interactions

Dokz: Build Documentation Sites with MDX — Create documentation with live-reload and based on Next.js, and you can import React components in MDX. See their docs for an example.

Tommaso De Rossi

Serverless Headless CMS Powered by Node and React with a GraphQL API

Webiny sponsor

React Lazy Load Image Component: Jumpstart Your App's PeformanceLazy loading has the potential to dramatically improve the perception of your app's performance. However, it can be complicated to implement. This libary takes care of the details and makes it much easier. Live demo here.

Albert Juhé Lluveras

React Native Share 3.5: A Simple Tool for Sharing Messages/Files with Other Apps — Rather than build redundant functionality within your own app, why not concentrate on its core functionality and then share messages and files with complementary apps on the same device?

React Native Community

React Bootstrap Typeahead: Inspired by and Improving On Twitter's typeahead.js — This library improves on typeahead.js in that it is compliant with the increasingly important WAI-ARIA authoring practices intended to increase the accessibility of web pages for all.

Eric Giovanola