Ten lessons about React state

#​257 — September 22, 2021

Read on the Web

React Status
⚛️ Your weekly React news digest, every Wednesday.

Introducing Gatsby 4, Now in Beta — Gatsby 4, the latest version of the popular React and GraphQL-based site generation framework, introduces new content rendering methods, new build and deployments architecture, new CMS APIs, and more.

Gatsby Team

🐦  Ten Lessons I’ve Learned About Handling React State (Told in Ten Tweets) — You would think the strict content limitations of Twitter would be unsuitable for detail-oriented tutorial content. Not so. In fact, the forced brevity actually sharpens the storytelling, as this set of tweets illustrates.

Cory House

ButterCMS – #1 Rated Headless CMS. Melts into React Apps — ButterCMS is the #1 rated Headless CMS for React. Enable your marketing team to update website content w/ our easy to use dashboard. Fast content API for modern apps. Secure. Scalable. Less Code. Try free today for 30 days.

BUTTERCMS sponsor

Material-UI Rebrands as MUI, Releases v5.0 — Formerly known as Material-UI, the new-look company has broken their product into a free, ‘community’ core and a fee-based set of ‘pro’ extensions. The detailed explanation behind the rebrand is covered in a recent blog post.

MUI

▶  Sunil Pai: React and the Meta of the Web — In a recent latest addition to his YouTube channel, Swyx has an extended and detailed conversation with former React Core Team member Sunil Pai.

Shawn ‘Swyx’ Wang

Using Recoil Instead of Redux for State Management in React AppsJotai and Zustand are other lightweight options to consider too.

Origho Precious

React Readability Analysis of Implementing Custom Hooks — We have featured a number of this author’s articles previously (in 245, 253 and 254). This time he returns with the third instalment in his Readable React series, focusing on abstracting code away in custom hooks to make components that call them clearer and easier to understand.

Chak Shun Yu

Jobs

Senior Frontend Engineer at UnifiHealth (Remote) — We’re a seed-stage health insurance startup. Are you looking to have a big impact? Apply to be our first frontend engineer.

UnifiHealth

React Developer at X-Team (Remote) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more.

X-Team

Find React Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.

Hired

Streamlining a React Monorepo

Brandon Roberts

How to Create a Three-Layer Application with React Hooks

Cristian Salcescu

Implementing Your First End-to-End Tests in React with Cypress

Anna McDougall

🛠 Code and Tools

React CountUp 6.0 — For when simply displaying a static number feels very 2020 😉

Glenn Reyes

next-i18next: Translate Your Next.js Apps — Last time we checked, only about 5% of the world’s population speaks English as their first language. Make your app available to at least some of the other 95%.

Isaac Hinman

Shortcut Puts the ‘Can’ in Kanban and the Agile in Agile

Shortcut (formerly Clubhouse.io) sponsor

react-native-audio-recorder-player: Third Major Release — The original maintainer of the code base has returned and through a re-write of the codebase has provided some interesting new features.

Hyo Chan Jang

react-windows-ui: Build ‘Windows Fluent’ Apps — Although Windows may be anathema for many developers, there’s a signicant number of users who will welcome the familiarity and appreciate a Windows-like user interface.

Vivek Verma

Agrippa: Creating Components Without Boilerplate — Through a simple CLI, this library enables React developers to generate templates for a variety of different types of React components. It detects defaults in your configuration (and sets them, too) and is configurable through JSON.

Nitzan Hen

Quickshare: Quick, Simple File Sharing — All the functionality you really need for enabling the upload and download of files in your app.

Hexxa

⚡️ Quick Bits:

React Horizontal Scrolling Menu — When your content exceeds the available screen real estate.

react-native-mask-text — Ensure input is (mostly) correct before it hits your backend.

react-native-map-link — Open a location in any popular map app.

Nuka Carousel 4.8 — Pure React carousel component.

Leave a Reply

Your email address will not be published. Required fields are marked *