effect-ts-react-stable-hooks

effect-ts-react-stable-hooks

An effect-ts port of fp-ts-react-stable-hooks. Reduce unnecessary rerenders when using effect data types with React hooks.

Stable hooks use effect-ts equivalence functions instead of React's shallow (reference) object comparison.

By default React will perform a JavaScript object reference comparison of two objects, otherwise known as shallow object comparison, which results in extra re-renders on “unchanged” values for effect-ts data types.

For example: Take an effect type such as Option who’s underlying data structure is is {_tag: "Some", value: 1}. Compared with another Option who's value is also {_tag: "Some", value: 1}, they will be considered different objects with JavaScript object reference comparison since O.some(1) !== O.some(1).

However, an equivalence function can dive down into the underlying value type and prove its equality. Given that, an equivalence function such as O.getEquivalence(Eq.number) can prove that O.getEquivalence(Eq.number)(O.some(1), O.some(1)) === true. Using these stable hooks instead of the basic react hooks will result in fewer unnecessary re-renders when using effect-ts data types.

Installation

npm install effect-ts-react-stable-hooks

Usage

Simple example useStableO with Option helper equality function

import * as Eq from "effect/Equivalence";
import * as O from "effect/Option";
import { useStableO } from "effect-ts-react-stable-hooks";

// Equality function defaults to Eq.strict() so there is no need to provide
// it for primitive data types such as string, number, or boolean
const [data, setData] = useStableO(O.some("foobar"));

Complex example useStable with equality function

import * as Eq from "effect/Equivalence";
import * as O from "effect/Option";
import { useStable } from "effect-ts-react-stable-hooks";

const [data, setData] = useStable(
  O.some({foo: "oof", bar: 1}),
  O.getEquivalence(Eq.struct({foo: Eq.string, bar: Eq.number}))
);

Example useEffect with equality function

import * as Eq from "effect/Equivalence";
import * as O from "effect/Option";
import { useStableEffect } from "effect-ts-react-stable-hooks";

const data: O.Option<string> = O.some("foobar");

useStableEffect(() => {
  // Typical react useEffect function goes in here
  ...
}, [data], Eq.tuple(O.getEquivalence(Eq.strict())));

Debugging Your Hooks

You can console log the reasons behind why certain hooks are called again by passing a debug flag to each one of the stable hooks which have equality functions provided in the API. The last parameter of the function is now a config object: StableHookOptions.

You can pass {debug: true} to have the console logs printed in all environments except for production.

API

React Hook	Stable Hook	Description
useState	useStable	Base hook that requires an equality function
	useStableE	Helper function which automatically proves the top level equality function for Either
	useStableO	Helper function which automatically proves the top level equality function for Option
useEffect	useStableEffect	Base hook that requires an equality function
useLayoutEffect	useStableLayoutEffect	Base hook that requires an equality function
useCallback	useStableCallback	Base hook that requires an equality function
useMemo	useStableMemo	Base hook that requires an equality function

React Hooks Linter

If you already use the recommended react hooks lint rule you can add this to your eslint file.

"react-hooks/exhaustive-deps": ["warn", {
  "additionalHooks": "(useStableEffect|useStableLayoutEffect|useStableCallback|useStableMemo)"
}]