How to useRef to Fix React Performance Issues

Sidney Alcantara who works on Firetable, a product which features a data grid and an adjacent side drawer. When clicking a cell in the table, the side drawer opens with info about the current cell. Initially they lifted up the state, but that caused performance issues: The problem was whenever the user selected a cell …

useQueryParams – A React Hook for managing state in URL query parameters

Once you’ve set up a QueryParamProvider high up your component tree, you can start using useQueryParam to get (and set) querystring parameters import * as React from 'react'; import { useQueryParam, NumberParam, StringParam } from 'use-query-params'; const UseQueryParamExample = () => { // something like: ?x=123&foo=bar in the URL const [num, setNum] = useQueryParam('x', NumberParam); …

useWorker() – Use Web Workers with React Hooks

useWorker() is a js library (with typescript support) that allows you to use the Web Worker Web API, through React Hooks. This library allows you to run the expensive function without blocking the user interface, using a simple syntax that makes use of Promise import React from "react"; import { useWorker, WORKER_STATUS } from "@koale/useworker"; …

useImmer – A React Hook to use Immer to manipulate state

useImmer(initialState) is very similar to useState. The function returns a tuple, the first value of the tuple is the current state, the second is the updater function, which accepts an immer producer function, in which the draft can be mutated freely, until the producer ends and the changes will be made immutable and become the …

useInView – A React Hook to work with IntersectionObserver

The react-intersection-observer package is an easy way to work with the Intersection Observer API in React. It comes with both a Hooks, render props and plain children implementation. import React from 'react' import { useInView } from 'react-intersection-observer' const Component = () => { const [ref, inView, entry] = useInView({ /* Optional options */ threshold: …

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 …

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 …

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 …