useStateGetReset

Custom useState with get and reset state functions.

Demo

INFO

The component has:

A useStateGetReset that receives an object, with three properties id, name, eta, and returns a tuple with stateG, setterG, getter and resetter.
A useState that receives same object of useStateGetter and returns a tuple with state and setter.
Each property of state and stateG is rendered an Input component that renders the input and label fields and the component's number of renders.
A onChangeGetter function made with useCallback to handle stateGetter input onChange, reading other values with getter function.
A onChange function made with useCallback to handle stater input onChange, reading other values by state variable.
A button that executes the resetter function on stateG.

The two functions onChange and onChange Getter update their respective state every time they are executed. Since the onChange function depends on the state, every time this changes it will be reevaluated and this will also trigger the rerender of the input components that have not undergone a change to their value variable. The onChangeGetter doesn't have this behavior: since the getter function isn't reevaluated even if the stateG changes, so the onChangeGetter is never reevaluated and only the input component that has a change in the value variable is rerendered.

Loading demo…

Show source code

tsx

import { BaseSyntheticEvent, memo, useCallback, useState } from 'react';
import { useStateGetReset } from "../../../..";
import { Input } from './InputMemo';

const Demo = memo(({ setS, getS, reset }: { setS: ReturnType<typeof useStateGetReset>[1], getS: ReturnType<typeof useStateGetReset>[2], reset: ReturnType<typeof useStateGetReset>[3] }) => {
	console.log("rerender");
	// eslint-disable-next-line @typescript-eslint/no-unused-vars
	const ss = () => setS || getS() || reset();
	return <>
		<p>DEMO</p>
	</>
})

const UseStateGetReset = () => {
	const [stateG, setStateG, getState, resetState] = useStateGetReset({ id: "", name: "", eta: "" });
	const [state, setState] = useState({ id: "", name: "", eta: "" });

	const onChangeGetter = useCallback((e: BaseSyntheticEvent) => {
		const state = getState();
		setStateG({
			...state,
			[e.target.name]: e.target.value
		});
	}, [getState, setStateG])

	const onChange = useCallback((e: BaseSyntheticEvent) => {
		setState({
			...state,
			[e.target.name]: e.target.value
		});
	}, [state, setState])

	return (
		<div style={{ display: "grid", gridTemplateColumns: "auto auto", justifyContent: "center", gap: 50 }}>
			<div>
				<p><strong>With get and reset</strong></p>
				<div style={{ gridTemplateRows: "auto auto auto auto", justifyContent: 'center', display: 'grid', gap: '10px' }}>
					<Input id="idG" name="id" value={stateG.id} onChange={onChangeGetter} />
					<Input id="nameG" name="name" value={stateG.name} onChange={onChangeGetter} />
					<Input id="etaG" name="eta" value={stateG.eta} onChange={onChangeGetter} />
					<button onClick={resetState}>Reset State</button>
				</div>
			</div>
			<div>
				<p><strong>Without get and reset</strong></p>
				<div style={{ gridTemplateRows: "auto auto auto", justifyContent: 'center', display: 'grid', gap: '10px' }}>
					<Input id="id" name="id" value={state.id} onChange={onChange} />
					<Input id="name" name="name" value={state.name} onChange={onChange} />
					<Input id="eta" name="eta" value={state.eta} onChange={onChange} />
				</div>
			</div>
			<Demo setS={setState as unknown as ReturnType<typeof useStateGetReset>[1]} getS={getState} reset={resetState} />
		</div>
	);
};

UseStateGetReset.displayName = "UseStateGetReset";

export { UseStateGetReset };

Types