React Newsletter #303

How to build a Wordle clone in React, Optimizing React Hooks, and event bubbling and capturing


This week’s issue is sponsored by CARTO.

Looking to develop geospatial apps and map visualizations using React?

CARTO, the leading Location Intelligence platform, offers a complete toolkit for React developers, including templates, components and libraries for rapid map-based app development, natively in the cloud. Watch their recorded webinar for more details.

👉 Check out their developer resources.


Articles

React Hooks & Optimisation

Tadeáš Peták writes, "no matter how well I believe I know useCallback, useMemo, and React.memo, this trio always merits an extra slice of my attention." In this post, he dissects each of them to help himself (and all of us) understand them better.

React: Event Bubbling and Capturing

In this article, Robin Wieruch gives some guidance for event bubbling and capturing in React with some helpful diagrams and code snippets.

10 Must-Know Patterns for Writing Clean Code with React and TypeScript

This article is geared towards beginners, but shares some helpful patterns to keep in mind for writing "clean" React and TypeScript code.


Tutorials

React native in-app purchases: simple implementation tutorial

This tutorial teaches you how to set up in-app purchases in React Native apps by walking you through the process of building an app that displays cat pictures to subscribed users and prompts everyone else with a subscription offer.

Clerk.dev

Clerk is the easiest way to handle user management, and it's got a bunch of helpful front-end components to quickly set up all types of auth, session management, user profiles, etc. It also integrates super smoothly with React, Expo, Next.js, and Gatsby. [sponsored]

The missing guide to React Native app variants — Part 1

In this tutorial, you'll learn how to set up your React Native app to support app variants, leading you through the Android/iOS setup step by step.


Projects

React Virtualized Window

A virtualized window is a React component for creating views on data where only the data items visible to the user are rendered.

oss.love

The Netlify team made this fun site that lets you send these pun-tastic valentines to your favorite OSS developers.

react-worker-components-plugin ⚡

Like react server components, but web workers instead of a server.

system-design-react-code-examples

A curation of code examples and in-depth technical implementation approaches to solve the common frontend system design issues in React.


Videos

Build A Wordle Clone With React In Under 3 Hours

In this 2.5-hour video, Harry Wolff walks you through how to build a clone of the popular word game from scratch using React, Tailwind, Zustand, Vite, and Vitest.

made with ❤️ by ui.dev