React useDeepCompareEffect Hook: A useEffect using deep comparison

A custom Hook by Kent C. Dodds (who else?) that might come in handy for “those situations”: React’s built-in useEffect hook has a second argument called the “dependencies array” and it allows you to optimize when React will call your effect callback. React will do a comparison between each of the values (via to […]

Component Variations: Considerations for Creating a Card Component

Chris Coyier wants to create a Card Component in React. But then he suddenly finds himself down the rabbit hole: how flexible does he make it? What is configurable and what is not? Where to draw the line? It sounds very familiar, as I’m always pondering over things like this when writing libraries/reusable things in […]

You don’t need webpack / Rollup / Babel / whatever to start with React

A common misconception about React is that you need to set up an entire toolchain to get started with it. While that might have been true in the past, that certainly isn’t the case today. From the React Docs: The majority of websites aren’t, and don’t need to be, single-page apps. With a few lines […]

React Query – Hooks for fetching, caching and updating asynchronous data in React

React Query provides you with a set of hooks to fetch data in React. Think of pages that use pagination, infinite scroll, auto-refetching, etc. It’s backend agnostic, so sources can be REST, GraphQL, etc. Here’s an example that uses pagination import React from 'react' import fetch from '../libs/fetch' import { usePaginatedQuery } from 'react-query' export […]

React Refs, both Class and Function Components

Good post by Lachlan Young with a simple use case for using createRef (Class Components) and useRef (Function Components): focusing an external component (here: TextField from Material UI) when your own parent component mounts. I especially like the final thoughts at the end of the post: If you had no need for a ref besides […]

useEffect(fn, []) is not the new componentDidMount()

Brad Westfall from React Training on why the React hook useEffect(fn, []) is not the same as componentDidMount(): When developers start learning hooks having come from classes, they tend to think “I need to run some code once when we mount, like how componentDidMount() works. Ah, I see that useEffect with an empty dependency array […]

N26 and the lack of JavaScript

Hugo Giraudel, engineer at N26: In the last few years, we have seen more and more ways to build highly interactive web applications relying almost exclusively on JavaScript. To the point where we almost wonder whether we forgot from where we come from. Not so long ago was a time was JavaScript was just sprinkled […]

react-three-fiber – React renderer for three.js

This is a React renderer for Threejs on the web and react-native. Building a dynamic scene graph becomes so much easier when you can break it up into declarative, re-usable components that react to state changes. This is less of an abstraction and more of a pure reconciler (like react-dom in relation to HTML). It […]

Debunking the Myth: Accessibility and React

Mark Steadman from Deque: React can be an accessible application framework with the right knowledge and the right know-how. The stigma that it is not an accessible framework is simply not true. It has some of the best built-in accessibility functionality there is out there, and a large community of accessibility advocates that are creating […]