gqless – A GraphQL client without queries

Now this is a step forward: gqless is a fundamentally new approach to a GraphQL client. It makes using your API enjoyable, by generating queries at runtime based upon the data your app consumes. Here’s an example app of it in action. Notice how the data it fetched automagically, depending on what is to be […]

RedwoodJS – Bringing full-stack to the JAMstack

Now here’s an interesting project: Redwood is an opinionated, full-stack, serverless web application framework that will allow you to build and deploy JAMstack applications with ease. Imagine a React frontend, statically delivered by CDN, that talks via GraphQL to your backend running on AWS Lambdas around the world, all deployable with just a git push […]

Mutik – A tiny immutable state management library based on Immer

Nice work by Jared Palmer: a React State Management Library which uses Immer internally so you don’t have to worry about overwriting (unrelated) parts of your state whilst updating some value in it. import React from 'react'; import { render } from 'react-dom'; import { createStore, Provider, useSelector } from 'mutik'; // Create a lil' […]

React: You May Not Need Controlled Form Components

To work with forms in React two approaches are to either use Controlled Components or use Uncontrolled Components (as detailed here). Swyx shares a third way of working with forms: A lower friction way to handle form inputs is to use HTML name attributes. As a bonus, your code often turns out less React specific! […]

React: Hooks vs. Render Props vs. Higher-Order Components

Nice post comparing these three approaches and detailing why you should use the version with hooks. // #1 – Hooks const MyComponent = () => { const mousePosition = useMouse(); // mousePosition.x, mousePosition.y } // #2 – Render Props const MyComponent = () => { return ( <Mouse> {({ x, y }) => { // […]

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 Object.is) 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 […]