Bookmarks (174)

Storing State in the URL with URLSearchParams — We love what the creator said about this: “I love this more than I can reasonably explain; it’s a generic React hook for storing state in the URL with the querystring/URLSeachParams. So handy for making shareable links.”

Getting Started With TypeScript and React — In this post, we’ll look at a few advantages of using TypeScript with React. Then, we’ll set up a React-TypeScript project and go through some of the fundamentals. Check it out.

▶  Next.js 12.3 Features Walkthrough and Demo — Vercel’s VP of Developer Experience walks through the changes in the latest version of Next.js which we squeezed in to last week’s issue. If you don’t like video, you can read more about the release on Vercel’s blog.

'React I Love You, but You’re Bringing Me Down' — An opinionated React thought piece that’s provoked much discussion this week. The author gets creative by checkpointing the progress (or lack thereof) of React over the years in ‘mix tape’ style with code and memes sprinkled in for good measure. (Hacker News went deep on this item and spawned some interesting sub-threads covering topics like...

Linkify 4.0: Link Up URLs, Email Addresses, and More in Plain Text — Given some plain text containing things like links and emails, Linkify will generate the correct code to display it on the Web. Not just URLs or emails, but hashtag, @mentions, IP addresses, and more – see the homepage for examples. GitHub repo.

Theatre.js 0.5: Hackable Motion Design for the Web — Can be used both programmatically and visually to animate 3D objects created with things like Three.js, React Three Fiber, HTML/SVG, or even to ‘animate’ variable values. v0.5 introduces 3D scene editing and complex keyframing. Docs and GitHub repo.

Mantine 5.4: A Full Featured React Component Library — We don’t want to feature every release Mantine has, but they’re making so much progress and doing such great work lately that they deserve the attention right now. v5.4 adds validateInputOnBlur, non-linear scales for sliders, a new way to organize ‘switch’ components, and more. Mantine UI also gained 10 new components.

TinyBase 2.0: A Library for Structuring App State — If you want a bit more database-esque structure around the management of state in your apps, this is worth a look. The demos are notable for how well explained they are so do check those out. GitHub repo.

Deploying a WASM-Powered React App on Vercel — Keen to get your feet wet with WebAssembly? This brief guide, on a topic not often covered, shows some initial steps.

Simple React Scroll Animations with Zero Dependencies — In three straightforward steps, this shows you how to trigger fade- or float-in animations during scrolling using nothing but hooks, CSS and the Intersection Observer API.

Radix Icons: A Crisp Set of 15×15 SVG Icons — Copy any icon directly in inline SVG format or download for Figma, Sketch, or as individual React components.

React Grid Gallery 1.0: An Image Gallery Component — Inspired by Google Photos. There are several good demos to see, and you can integrate it with a lightbox component if needed. GitHub repo.

React Router 6.4: Bringing in the Remix Features — The latest release of the popular router adds data loading, data mutation, pending navigation, and error handling APIs from Remix, bringing them to every React Router app.

A React 'Bug' (Of Sorts..) — The details HTML element doesn’t seem to play well when used as a controlled component in React, as pointed out in this open GitHub issue. A quirk to be aware of.

The Orton Effect: 'Dreamy' Looking Photos with CSS and React — Named after Canadian landscape photographer Michael Orton, this image effect creates a surreal, dream-like result.

▶  'React 18's New State Hook You've Never Heard About' — We know videos are a hard sell, but Jack is at the top of his game right now, and this one has had rave reviews. It covers useSyncExternalStore from start to finish with a practical example and is well worth the watch. If you don’t like videos, though, the next item covers it in...

useSyncExternalStore: The Underrated React API — useSyncExternalStore (also featured above) is a hook for subscribing to external data sources. But did you know it can also be used to stop over-returning React hooks triggering needless re-renders?

Frontend Masters Community Sale — Celebrate new community features with $100 off a yearly membership – our first discount in over 3 years! See details.

Why Every React Developer Should Learn Function Composition — Addressing cross-cutting concerns is often accomplished using crude and fragile copy/paste techniques. Here’s a more elegant approach.

Preact's Signals: A 'Fast-by-Default' Reactive State Primitive — They provide a reactive way of expressing state (in a natural way that feels like using plain values) such that apps stay fast regardless of complexity. It’s a Preact (a slimline React alternative) development, but it can be used with React through a monkeypatch. Note that Dan Abramov shares that the idea isn’t “very promising” for...

The Basics of Remix — Remix is an up and coming full stack Web framework with a lot of neat ideas. This introduction covers all the basics of handling routing, form handling, headers, meta tags and links to get you up and running.

Rodal 2.0: A React Modal with Animations — Things like spinning into view, sliding in, fading, zooming, flipping, etc. I’m not a fan of modals but this is nicely understated and quick. React 17+ only. Stick with v1 if you’re using React 16. GitHub repo.

▶  Creating F1 Style Graphics with Remotion — Fans of Formula 1 motorracing may recall the 'stinger' transition from the 2021 season. The author of Remotion – a library that can generate video from React code – walks through its recreation in what can only be described as record lap time. (And is, perhaps, the only coding video to begin at a racing circuit?)

📆  Next.js Conf 2022 Announced — Takes place on the sixth(!) anniversary of the creation of Next.js (the hugely popular React framework) and it’s online (and at no cost) so everyone can get involved. You could even be a presenter – the call for proposals is open till September 16. The event starts at 10:30am Pacific on October 25, 2022 and you can register here.

FlexGrid by Wijmo: The Industry-Leading React Datagrid — We are excited to announce some great new features in our powerful React datagrid component for your web applications. Bind, edit, sort, filter, group, and do much more to make the most of your tabular data. Get started with FlexGrid for free today.

Why Use Storybook in 2022? — I’d prefer an independent take, warts and all, but this is a reasonable roundup of why Storybook is popular among users of component-driven frameworks. Write declarative stories, simulate your components in action, and share the results or use it as an internal directory.

React Native 0.70 Released — The new release features Hermes as the default engine, full CMake support for Android, unified configuration for Codegen, and a refresh of the documentation for the ‘New Architecture’.

How BenchSci Moved Its Science Webapp to Next.js — BenchSci’s AI-Assisted Reagent Selection app is at the core of the company’s business. Here’s the story of how they moved it from a collection of legacy technologies to Next.js without sacrificing the user experience.

react-cytoscapejs 2.0: Component for Network Visualizations — Wraps the popular Cytoscape.js graph network rendering library and makes its visualizations (such as these) more easily deployable within your React app.

Hyper Fetch: A Turbocharged Fetch Library — The creator bills it as “a mix of Axios and react-query in one, with advanced persistence options.” It’s backend agnostic and offers queues, caching, persistence, and even offline support out of the box. GitHub repo.

React Recoil Form: Efficient State for Large Forms — While still in pre-release, this library employs Recoil to handle large forms such that typing in one field doesn’t lead to unnecessary re-renders of the entire form.

Understanding useMemo and useCallback — Many find these hooks confusing. This tutorial takes a crack at what they do exactly, why they’re useful and how to get the most out of them – and all in Josh’s usual highly accessible and engaging style.

Zhithead: A React and Framer Motion-Based Clone of a Ruder-Named Card Game — You can play the actual game here. I’m not familiar with the original game myself, but it’s a slick experience.

Sandpack: Component Toolkit for Creating Your Own Live Running Code Editing Experience — Created by the folks at CodeSandbox, so they know what they’re talking about. It has a really neat landing page, BTW.

ReacType 13.0: The React Prototyping Tool — ReacType is an Electron app for prototyping React apps with a drag-and-drop canvas, preview rendering, and a tree graph to visualize app structure. v13 overhauls how state is managed

Loading Disco: An Alternative to the Loading Spinner — Neat demo, though more subtle and less disco-y than I was expecting (perhaps to your relief) :-) Joe has used a neat technique and he invites you to “copy, remix and improve to your heart’s content.” GitHub repo.

▶  How to Get Started with React and MUI — A 17 minute walkthrough of creating a basic app with MUI providing the components.

Instant Performance Upgrade: From FlatList to FlashList — Shopify’s more efficient FlashList is a simple swap-out for React Native’s FlatList and has the potential to make your list-intensive app really sparkle.

When to Use useLayoutEffect Instead of useEffect — Do you have an annoying flicker in your UI? It may be you’re using the wrong one of these two hooks: it’s all about whether the hook fires before or after the browser paints.

React Error Boundaries: A Guide — Not properly catching errors thrown by third-party libraries or React hooks can have them end up reaching the top-level of the main execution thread, resulting in the dreaded “white screen” scenario. The official docs on error boundaries also remain useful.

Why React Contexts Are Great (and Why We Didn't Use Them) — Something can be good, but also not a great fit for every project. Allen explains where his team ran into problems with useContext.

(Re-)Introducing Gatsby, A 'Reactive Site Generator'? — Gatsby’s new focus is on enabling teams to publish content rapidly using a new architecture that they say allows Gatsby Cloud to publish to its CDN in one second. This post benchmarks Gatsby’s “Reactive Site Generation” (RSG) approach against traditional static and server side approaches.

Dynamic Link Previews for a React SPA using AWS Lambda@Edge — Using AWS’s edge-based serverless function service to render an index.html with dynamic meta tags to support link previews on WhatsApp, Twitter, and similar services for a React SPA.

How to Use Forms in React — A seemingly basic topic covered at a low level in Robin’s typically easily accessible manner. Once you grasp the basics, you can then pick up things like React Hook Form or Formik with confidence.

Advanced React Component Composition — A deep dive into the principles of composition for designing and building reusable components that scale.

Implementing Collaboration Has Never Been Easier — Transform your application within hours thanks to ready-to-use features like comments, track changes, real-time collaboration, and version history. With CKEditor 5 and its native React integration, it is that easy! Start a free trial to test it right away.

Why React Re-Renders — The processes around rendering are so important to understand and get right if you want to get the best performance possible from your React apps. There’s no shortage of stories talking about making React rendering more efficient, but this one digs into why React re-renders in the first place and in an accessible, easily followed way too.