Hi everyone!

This week we have an exciting sneak peek of the future of React and memoization, and a lot of Lee Robinson's related content 😄

Expo is going strong in the React-Native ecosystem and the app stores 💪

JavaScript Rising Stars 2023 has been published. This year I had the opportunity to comment on the React section. shadcn/ui and Bun took the world by storm. I’m also thankful for Theo recommending my newsletter in his related trend analysis video: welcome to all of you who signed up recently 🙏

Paris 2024 is not only the Olympic Games: we are also back at the center of the React conf world!
Since the end of React Europe, there has been a lack of great React conferences in Paris. It’s finally fixed with 3 great upcoming confs 👌

📅 22 March - React Paris - The crew behind React Brussels and BeJS is launching a new conference in Paris and a great line-up has just been announced today!
📅 22-23 April - React Connection + React-Native Connection - Last year’s half-day React-Native conference that I helped organize was a great success. So it returns this year as a 1-day + 1-day conference, making it more worth it to travel. CFP is open until 3 February.

I’ll try to attend both, and hope to meet some of you there!

💡 Subscribe to the official newsletter to receive an email every week!

💸 Sponsor

Nlux ― A new new React / JS library to create conversational AI web apps

NLUX (for Natural Language User Experience) is a new open-source React / Javascript library that makes it simple to integrate powerful large language models (LLMs) like ChatGPT into your web app or website. With just a few lines of code, you can add conversational AI capabilities and interact with your favourite LLM.

Key features 🌟 include:

Build AI Chat Interfaces In Minutes - High quality conversational AI interfaces with just a few lines of code.
React Components & Hooks - <AiChat /> for UI and useAdapter hook for easy integration.
Flexible LLM Adapters - ChatGPT and HuggingFace, and an API to Create Your Own Adapter for any LLM.
Customisable Chat Personas - Configure bot and user pictures, names, and descriptions for personalised interactions.
Zero Dependencies - Lightweight codebase, with zero-dependencies except for LLM front-end libraries.

More info, examples and documentation on Nlux.ai

⚛️ React

The future of React.use and React.useMemo - a powerful alternative to context selectors

Colin explains how React context can cause performance problems, the lack of a context selector API, and how he optimized an app’s performances thanks to the userland use-context-selector implementation from Daishi Kato.

The most interesting part is a great summary of the recent Twitter discussions. Dan Abramov explained context selectors do not compos well. Andrew Clark shared the plan to extend useMemo() and allow the usage of other hooks inside it. This would work with the use hook with any Usable types (currently context and promises, but maybe Observables and stores in the future?), but also third-party hooks! This would solve the fine-grained selection problem in a performant and composable way, and be compatible with the upcoming React Forget compiler.

The Two Reacts

Great writeup from Dan Abramov, giving good reasons for code to run locally (instant feedback), as well as remotely (close to the data source). He proposes a new React formula: UI = f(data, state), where f represents all your whole React app, running in 2 distinct environments.

This ends with a great question, implicitly asking if you would invent React Server Components to solve this problem.

Is there some way we could split components between your computer and mine in a way that preserves what’s great about React? Could we combine and nest components from two different environments? How would that work?

💸 From Dreamweaver to JSX: The Evolution of Visual Dev Tools for the Web
🌟 2023 JavaScript Rising Stars: see my comment on the React section.
🐦 Next.js can now run with HTTPS locally
📖 Remix Docs - new Client Data guide
📜 Common mistakes with the Next.js App Router and how to fix them: Lee Robinson is in touch with hundreds of Next.js devs and gathered the most common mistakes. Also available as a video. TIL that the redirect function returns a never type and throws a Next.js specific error, surprising design.
📜 How I'm Writing CSS in 2024: Lee Robinson likes CSS in 2024. He describes constraints that make a great UX/DX, and the role of a build step, compiler, or streaming. He recommends CSS Modules, Tailwind CSS, or StyleX.
📜 Increasingly miffed about the state of React releases: No stable release for 550d considered harmful.
📜 Executing Dangerously Injected Scripts Inside React Components: Interesting technique to bypass security limitations and execute scripts injected through dangerouslySetInnerHTML, using Document Fragments.
📜 28 Advanced NextJS features everyone should know: List and comments on various lesser-known features the author did not encounter in any app he worked on.
📜 Things I would change about React to increase DX: List React pain points I can agee with, and make rough propositions to fix them (not all of them are great nor possible IMHO).
📜 Harmful complexity: using React for static content: Interesting opinion, but I hope to prove the author wrong and believe React is nice for static content, particularly with RSCs.
📜 A new blog for 2024: Using moderns tools such as Catalyst, TWC, Contentlayer, Tailwind, Next.js
📜 How to Set Up Soft Navigation Reporting in a React App: Shows usage of the Google web-vitals npm package in a CRA app.
📜 Introducing Superglue: React ❤️ Rails: “Superglue makes React and Redux as productive as Hotwire, Turbo and Stimulus”
📜 How Lee Robinson created his Guestbook, and you can do it too
📜 2024 Predictions by JavaScript Frontend Framework Maintainers
📦 Fresnel 7.0 - React 18 support - SSR compatible approach for responsive layouts for React
📦 @tanstack/router-vite-plugin - Vite alternative to the router CLI
📦 Docusaurus 3.1 - built-in broken anchors detectors, parseFrontMatter hook
📦 Astro 4.1 - Accessibility audit rules, client:visible rootMargin, custom cookie encoding
📦 Mutative 1.0 - Efficient immutable updates, 10x faster than Immer
📦 JSX email 1.7 - A fork of react-email that keeps being improved
🔨 Palettify - Get an instant preview for your theme - supports shadcn/ui and soon MUI
🔗 Remix Resources - Community templates, stacks and libraries
🎥 Jack Herrington - HTMX For React Developers in 10 Minutes
🎥 Lee Robinson - React Server Components: the Good, the Bad, and the Ugly
🎥 Remix Singles - "Trellix" - Cookies, Auth, and Drag & Drop: 15 short videos by the Remix team, building a Trello clone (see the demo app).

💸 Sponsor

CMS with Inline Visual editing for Next.js, Remix and Gatsby

Set up a project in just 1 minute with the CLI and define your own Visual blocks as React components to convey your pixel-perfect corporate brand, using any CSS framework.

Content editors can easily use these blocks to compose pages visually, just like using a word processor, without compromising the design system.

React Bricks is enterprise-ready with Digital Assets Management, Advanced SEO, Collaboration, Scheduled Publishing, Multilanguage, Integrations with external data sources, Approval Workflow, Single Sign-On, Multiple environments, Backup and Change history.

Trusted by corporate clients such as The Weather Channel, Deel.com, La Banque Postale, leading eCommerce sites and over 8,500 users worldwide.

Get started today!

📱 React-Native

Who's using Expo OSS in 2024

Evan Bacon gathered an impressive list of 1,599 apps that are using Expo libraries (and therefore, React Native). The list includes household names like Pizza Hut, Burger King, Microsoft, Discord, Shopify, NFL, Walgreens, Amazon, CNN, and many more. It’s not news to us that React Native is thriving, but it’s nevertheless encouraging to see the big role that it plays when you look at top apps in the App Store.

💸 Galaxies.dev - Master React Native & Save 25% on PRO with code GALAXIES24
👀 Proposal: Hover style API for iPad / Apple Vision Pro The iPad supports hover effects for mouse/trackpad users, and this will also be useful for Apple’s upcoming Vision Pro, where navigation elements get highlighted when the user looks at them.
📜 Introduction to Reanimated: A good introductory article to learn about the concepts behind one of the most popular animation libraries for RN: shared values, reanimated style, animated view.
📦 React-Native v0.73.2 + v0.72.9 + v0.71.15: new releases fix the "Error installing boost Verification checksum” iOS build errors, among other things.
📦 react-native-vision-camera 3.7.0: Now includes an Expo config plugin to easily enable the fully native QR/Barcode scanner.
🎥 Theo - Moving off React Native: Clickbait, but informative. This is about moving from “vanilla” React-Native to Expo.
🎥 Szymon Rybczak - Bringing React Server Components to React Native
🎥 Simon Grimm - THE React Native Tech Stack for 2024

🔀 Other

🤭 Fun

See ya! 👋

This Week In React #169: useMemo, 2 Reacts, Next.js, Remix, JS Rising Stars, Docusaurus, Astro, Fresnel, Mutative, JSX emails...

💸 Sponsor

⚛️ React

💸 Sponsor

📱 React-Native

🔀 Other

🤭 Fun