1.0.5 • Published 5 years ago
@jsxtools/use-equal-state-factory v1.0.5
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>
</>
);
}