1.0.5 • Published 5 years ago

@jsxtools/use-equal-state-factory v1.0.5

Weekly downloads
1
License
CC0-1.0
Repository
github
Last release
5 years ago

use-equal-state-factory

use-equal-state-factory returns a hook that provides a state and setter that check for shallow or deep changes.

It is 161 bytes (146 gzipped).

Installation

npm install @jsxtools/use-equal-state-factory

Usage

import { useState } from 'react';
import useEqualStateFactory from '@jsxtools/use-equal-state-factory';

const useEqualState = useEqualStateFactory({ useState });

function Component () {
  // shallow updates to formData will not trigger re-renders
  const [formData, setFormData] = useEqualState({ givenName: 'Jonathan', familyName: 'Neal' });
  const onGivenNameInput = event => setFormData({ ...formData, givenName: event.target.value });
  const onFamilyNameInput = event => setFormData({ ...formData, familyName: event.target.value });

  return (
    <>
      <p>
        <label htmlFor="gn">Given Name</label>
        <input id="gn" defaultValue={formData.givenName} onInput={onGivenNameInput} />
      </p>
      <p>
        <label htmlFor="fn">Family Name</label>
        <input id="fn" defaultValue={formData.familyName} onInput={onFamilyNameInput} />
      </p>
    </>
  );
}
1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

6 years ago

1.0.0

6 years ago