#​346 — July 5, 2023

Read on the Web
Together with  Sentry logo
React Status

▶  What's Next For Redux? (with Mark Erikson) — The king of the React YouTubers takes a break from his usual screencast format to sit down with Redux maintainer Mark Erikson (a.k.a. acemarke) to talk about both the current and future states of Redux and Redux Toolkit, both of which are approaching major new versions.

Jack Herrington

Remotion v4.0: A Big Step Forward for React Video Creation — Remotion is a framework for creating videos programatically using React. v4 is such a big update they ▶️ recorded a 6-minute keynote to show it off with more videos to come later this week. The Preview function has morphed into Remotion Studio and comes with a range of new features including interactive editing of props, a one-click rendering approach, and a Rust-powered architecture with FFmpeg all bundled in.

Jonny Burger

Debugging React Native Apps End-to-End: Best Practices — Debugging cross-platform apps can be challenging. Join developers from Meta, Expo and Sentry for a live AMA on Wednesday, July 26th, at 10am PT to learn and share tips and best practices. Register here.

Sentry sponsor

Breaking Up with SVG-in-JS in 2023 — “SVGs in JS have a cost and SVGs do not belong into your JS bundle.” A look into why you shouldn’t have SVGs in your JS bundle and better techniques for using them from JSX.

Jacob Groß

IN BRIEF:

  • Next.js v13.4.8 is a bigger release than its version number lets on, including significant performance improvements to the compiler and HMR / React Fast Refresh, as well as bug fixes.

  • Did you know that React can update state while rendering? Here's more on how that works from Mark Erikson.

  • 🐝 We're doing a full feature on it in an upcoming issue, but Wasp is worth a look if you'd like a Rails-like framework for React. It uses Node and Prisma behind the scenes. There are many moving parts, but the project has just gone through its latest 'launch week' and it looks intriguing.

  • TypeScript 5.2 Beta has been released.

▶  The Cost of JavaScript in 2023 — In just 35-minutes, Web performance expert Addy Osmani covers the various ways JS apps are delivered and rendered, the constraints of the hardware running them, and techniques you can use to keep things running smoothly.

Addy Osmani

Some React Performance and Optimization Ideas — A concise summary of optimization techniques with links to further resources. A representative example of the solid content you’ll find in the React Handbook.

Eric Diviney

▶  Redirecting Unauthenticated Users with Protected Routes in the Next.js 13 App Directory — For Supabase Auth users, specifically.

Jon Meyers (Supabase)

📰 Classifieds

💻 Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

🐦 If you have any tweets left in your quota, @CodeWisdom is an account we've been running for years featuring quotes from the greats like Grace Hopper and John Carmack.

Classifieds is a new way to share projects, services, or jobs you may find useful. It replaces our old job listings section.

We'll share more info on getting your own listings here soon.

🛠 Code and Tools

React Select: A Flexible Select Input Control — Supports things like option groups, portals, animations, multiselect, and autocompletion. Accessible too. There are plenty of examples on the homepage to check out. (GitHub repo.)

Jed Watson

HouseForm: Simple-to-Use Field-First React Form Validation — Powered by Zod, works in any React supported environment, and boasts faster validation compared to similar solutions.

HouseForm

React Authentication — Without Complexity — Userfront streamlines authentication & access control so engineers can focus on their core business. Read the docs now.

Userfront sponsor

shadcn/ui: Tailwind CSS Components to Copy and Paste — If you’re a Tailwind CSS fan, these components will be right up your street. As the creators say: “This is NOT a component library. It’s a collection of re-usable components that you can copy and paste into your apps.”

Shadcn

React Native Iconify: Simpler Icons for React Native Apps — Provides access to 150,000+ icons.

Oktay Şenkan

react-intersection-observer: A Component to Monitor When an Element Enters or Leaves the Viewport
Daniel Schmidt