📨 #119: React OG Images, Tremor, Storybook, Decoupling, Rendering, Data-Fetching, Remix, Qwik, TypeScript, Playwright...
Hi everyone!
A week with a lot of good and varied React articles. It's calm on the React-Native side.
The ViteConf has just started, there will probably be some announcements for next week ;)
💡 Check this newsletter on Twitter - visual format 🎨
As always, thanks for supporting us on your favorite platform:
- 🦋 Bluesky
- ✖️ X / Twitter
Don't miss the next email!
💸 Sponsor
Have you already tried Storyblok? It's the headless CMS with a Visual Editor designed for both developers and marketers!
Use Storyblok React SDK to quickly build reusable components and fetch the content to create your React, Next.js, Remix, or even React-Native applications, websites or eCommerces.
Check out Technology Hub and find it out yourself!
⚛️ React
Vercel OG Image Generation: Fast, dynamic social card images at the Edge
Vercel presents a new very efficient solution to generate dynamic social cards in Vercel Edge Functions. Practical: it is possible to use JSX, React components (stateless) and Tailwind without additional config. I recommend this thread explaining how it all works, very interesting! They even use Yoga, the layout engine from React-Native 🤭
The future of rendering in React
Well-illustrated article that presents the rendering patterns of React 18 and above. You will find information about how SSR streaming works, Suspense, React lazy, feature flags implementation with Server Components...
Overcoming Popular Issues With React Projects
Encourages to decouple our JavaScript apps from the framework (React or other). Promotes a return to more simplicity. Some hot takes that will probably not agree with.
Tutorial with a particularly interesting section that explains how to automate the creation of Storytook controls by reusing the TypeScript types of the underlying UI library. Very useful when forwarding props. Even supports helpers like Pick and Omit.
- 👤 Sathya Gunasekaran (ex V8) joins the React core team, most likely to work on the React-Forget compiler
- 👥 Next.js Conf 2022 speakers
- 📖 Beta docs: React.Children + useId + createElement + useImperativeHandle
- 📖 Next.js on Vercel docs improvements
- 🌶 React and Next.js is DEAD — Something New is (Finally) Replacing It (For Good): explains how the Qwik framework presents a superior model to React. Click-bait title, but really interesting article.
- 📜 Build a React Custom Renderer - Part 1: new series that shows how to create a React renderer. For now it's quite easy to follow, but it does not yet support updates.
- 📜 Remix, React, and State: gives a mental model for Remix that reconciles the React state in an end-to-end / fullstack way.
- 📜 How to write your own state management library: useful to understand how a state management library works, and how to implement a selector system.
- 📜 How to fetch data in React with performance in mind: explains why data-fetching in React is not as simple as it seems. performance is related to UX/perception. Explain waterfalls, browser request limits...
- 📜 Avoid impossible UI states with React, Typescript and xState: TypeScript's discriminated union-types avoid impossible states, and XState avoids impossible state transitions.
- 📜 I changed my mind about writing new JavaScript frameworks: there are only 4 frameworks that support both SSG + SSR: Eleventy, Next.js, Gatsby, Redwood.
- 📜 How to Use Sandpack for Code Demos: article updated with the latest Sandpack features, this Codesandbox tool to create live code playgrounds. Used by React beta docs, Josh Comeau...
- 📦 Tremor 1.0: a library of React UI components to create dashboard analytics.
- 🐦 W3C Trusted Types + React + XSS: a new HTML proposal could provide a native solution to prevent XSS vulnerabilities, and perhaps eventually remove the need for
dangerouslySetInnerHTML?
Don't miss the next email!
💸 Sponsor
React Brussels - IRL & Online React conference - 14 Oct 2022
React Brussels is back for its first Hybrid edition to ever happen in the ❤️of Europe. Talks about the trendiest tech and skills (Playwright, WebVR, useEffect, Data Fetching, Remix …) will be on agenda; from some of the brightest minds in the React arena; namely :
- Tejas Kumar: DevRel Director - Xata
- Kathleen McMahon: Sr Design System Eng - Northwestern Mutual
- David Khourshid: Founder - Stately
- Shaundai Person: Sr Software Eng - Netflix
- Debbie O'Brien: Sr Program Manager - Microsoft
Afterparty, Contests, Job Opportunities, Belgian 🍺, Swag, City Tour ... all is there to last long beyond the conference itself !
IRL tickets are unfortunately sold-out ! You can still be part of the fun though! Get your 30€ online ticket 🎟 😜
📱 React-Native
- 🎥 Can It Be Done In React-Native - Season 5 Trailer
- 🚧 Expo Router 0.0.26: useHref / copy link + Splash Screen Orchestration
- 📖 React-Native docs fully bilingual - Java + Kotlin
- 🎨 Reanimated - useAnimatedKeyboard() demo
- 📦 react-native-test-app 2.0: Expo Config plugins support
- 📦 react-native-quick-sqlite 5.0: promise API
🧑💻 Jobs
🧑💼 Product Engineer at Causal, Remote/London/NY, $150-250k
Causal is a Series A Startup (backed by Coatue/Accel) building an all-in-one tool for working with numbers and visualizing data. We're looking for strong React engineers who can solve difficult UX/performance challenges.
🧑💼 G2i - 100% Remote React Native Jobs
We have several roles open for developers focused on React Native! Pay is ~160k plus 10% bonus. You must have production experience with RN and be based in the US. DM @gabe_g2i to learn more and don't forget to mention This Week in React.
🔀 Other
- Playwright Locators APIs inspired by Testing Library
- Deno - The Future of the Web is on the Edge
- New patterns for amazing apps
- Optimize long tasks
- Optimizing Interaction to Next Paint (INP)
- Cloudflare Pages gets even faster with Early Hints
- Codesandbox - A Unified CodeSandbox Experience
- Safari Technology Preview 155
- Axios 1.0
🤭 Fun
