#​310 — October 19, 2022

Read on the Web

Together with  Frontend Masters logo
React Status

Discussing First Class Support for Promises in Client and Server-Side Components — There’s a lot going on here! At the core of the discussion is a proposal for adding first class support for reading the result of a promise using Suspense which ultimately leads to official support for using Suspense for data fetching. At the heart of this idea on the client side is a new, conditional hook called use. If you want to see the thrashing out and development of a new React idea live, this is the one to watch..

The React Community

💡 If, like me, you learn better from examples, here are code examples of simple server-side and client-side components using the idea under discussion.

The Remix Fundamentals — Join Kent C. Dodds for this detailed video course and get up to speed on all things Remix — the full stack web framework. This course covers nested routing, mutations, progressive enhancement, prefetching, error handling, and much more.

Frontend Masters sponsor

Storybook Baking in First Class Support for Vite — Storybook, a popular UI component ‘workshop’ tool, is re-architecting itself around first-class Vite support with zero config setup, no Webpack required, faster startup, and instant reloads. Improved pnpm support is next on the roadmap. v7.0 is now available in a ‘late alpha’ stage – installation instructions are included in the post.

Ian VanSchooten (Storybook)

A Real World React to htmx Migration Storyhtmx is a library that essentially 'turbo charges' HTML by letting you use numerous JavaScript and Web API features by way of custom HTML attributes. It offers a very different approach to React, but a Python-based team found it worked better for them and it’s a neat case study as long as you appreciate the context they’re coming from.

David Guillot

Lessons Learned in Moving to Recoil.jsKitemaker recently moved to Recoil (a state management library from Facebook, but not the React team) to help remove unnecessary re-renders in their React app: this is what they learned along the way.

Kevin Simons (Kitemaker Blog)

IN BRIEF:

Creating a World-Class Code Playground with Sandpack — A couple of months ago we featured the release of CodeSandbox’s Sandpack, a toolkit for creating your own ‘live code editor’ components. Josh Comeau shows off how to actually use it to good effect to boost your blog posts, courses, etc.

Josh W Comeau

How to Use Google Sheets as a Database from React — Google’s Sheets isn’t going to power the world’s next big social network by any means, but there are some interesting advantages to be had by using it for smaller apps. This post demonstrates a way to hook things up by way of a serverless function.

Paul Scanlon

Live Event: Visual Workflow Automation, Now with Code

Retool sponsor

▶  Tic Tac Toe in React with HTML and CSS — For those newer to React a simple, clear application objective implemented from start to finish. (21 minutes.)

Chris Power

▶  A Next.js Crash Course — There are a lot of such videos, but this is a well recorded and up to date one so it might help you get the lay of the Next.js land if you’re just starting out with it. (2 hours 30 minutes)

Anson Foong

How to Create a React Dropdown — There's also a precusory write-up for creating a ‘select’ component.

Robin Wieruch

🛠 Code and Tools

Selection: A Library to Enable Visual DOM Element Selection — For example, if you want users to be able to drag a box around various elements they want to select. Touch device friendly. Has wrappers for use with React, Preact and Vue too. (Live demo.)

Simon Reinisch

Offline Support for React Native is Here! Try V5 of Stream's Chat SDK

Stream sponsor

TamoTam: An Open Source, Social 'Offline Events' Mobile App — A reader has submitted this project which is both a social project he’s working on, but also an example of building a React Native app on both Android and iOS along with tying together a variety of patterns and dependencies.

Daniel Danielecki

react-modal-sheet — Flexible, ‘buttery smooth’ bottom sheet component built with Framer Motion.
Teemu Taskula

use-modal-hook — A hook for controlling modal components.

Jobs

React Developer at Cisco (Remote in Europe) — Join the Cyber Vision team where we develop a leading cyber-security solution tailored for industrial customers and help us build our future versions.
Cisco

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