Urql – A highly customizable and versatile GraphQL client for React

From the folks at FormidableLabs: urql is a GraphQL client that exposes a set of React components and hooks. It’s built to be highly customisable and versatile so you can take it from getting started with your first GraphQL project all the way to building complex apps and experimenting with GraphQL clients. // App.js import […]

Thinking in React Hooks

React introduced hooks one year ago, and they’ve been a game-changer for a lot of developers. There are tons of how-to introduction resources out there, but I want to talk about the fundamental mindset change when switching from React class components to function components + hooks. The code-flow visualisations between the class component and function […]

Use React.memo() wisely

To improve user interface performance, React offers a higher-order component React.memo(). By memoizing the rendered output, React skips unnecessary re-rendering. This post helps you distinguish the situations when React.memo() improves the performance, and, not less important, understand when its usage is useless Use React.memo() wisely →

react-use – Browser APIs as React Hooks

react-use is a collection of React Hooks that wrap many browser APIs and functions. Want to track the geolocation of a device? Use useGeolocation. Want to read the battery status? Use useBattery. Etc. import {useBattery} from 'react-use'; const Demo = () => { const batteryState = useBattery(); if (!batteryState.isSupported) { return ( <div> <strong>Battery sensor</strong>: […]

React DevTools 4.0

Version 4 of the React DevTools have been released, with a lot of improvements. At a high level, this new version should offer significant performance gains and an improved navigation experience. It also offers full support for React Hooks, including inspecting nested objects. The release notes hold a detailed list of changes, with example gifs. […]

React: Forget about component lifecycles and start thinking in effects

Yesterday, while at a workshop, React Hooks (intro here) became the subject of discussion between participants. Someone in the audience asked how to easily map the classes+lifecycle way of thinking onto hooks, as she had trouble doing so. In short, my recommendation was to no longer think in lifecycles but to think in effects, as […]

create-es-react-app – A create-react-app like template using only es-modules (no build step).

create-es-react-app is a create-react-app like template demonstrating how far you can get creating progressive web apps (using react) with no build step. It takes advantage of static and dynamic imports which enables you to break up your app into small reusable ES modules that are compiled for you by the browser at run time. TIL: […]