Have ideas to improve npm?Join in the discussion! »

    fp-ts-react-stable-hooks
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    fp-ts-react-stable-hooks

    Stable hooks for react using FP-TS equality checks instead of shallow (reference) object comparison.

    license npm npm bundle size

    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 fp-ts data types.

    For example: Take an fp-ts 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 equality function can dive down into the underlying value type and prove its equality. Given that, an equality function such as O.getEq(Eq.eqNumber) can prove that O.getEq(Eq.eqNumber).equals(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 fp-ts data types.

    Installation

    npm install fp-ts-react-stable-hooks
    

    Usage

    Simple example useStableO with Option helper equality function

    import * as Eq from "fp-ts/Eq";
    import * as O from "fp-ts/Option";
    import { useStableO } from "fp-ts-react-stable-hooks";
    
    // Equality function defaults to Eq.eqStrict 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 "fp-ts/Eq";
    import * as O from "fp-ts/Option";
    import { useStable } from "fp-ts-react-stable-hooks";
    
    const [data, setData] = useStable(
      O.some({foo: "oof", bar: 1}),
      O.getEq(Eq.eqStruct({foo: Eq.eqString, bar: Eq.eqNumber}))
    );

    Example useEffect with equality function

    import * as Eq from "fp-ts/Eq";
    import * as O from "fp-ts/Option";
    import { useStableEffect } from "fp-ts-react-stable-hooks";
    
    const data: O.Option<string> = O.some("foobar");
    
    useStableEffect(() => {
      // Typical react useEffect function goes in here
      ...
    }, [data], Eq.getTupleEq(O.getEq(Eq.eqString)));

    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
    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|useStableCallback|useStableMemo)"
    }]

    Install

    npm i fp-ts-react-stable-hooks

    DownloadsWeekly Downloads

    10

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    35.8 kB

    Total Files

    54

    Last publish

    Collaborators

    • avatar