USEFUL REACT HOOKS

Installation:

Using npm:

$ npm i --save @keinguyen/hooks

Requirement:

• Node.js 16+
• React.js 17.0.2+
• Typescript 4.4.4+

Usage:

1. useId

// context.ts
import { useId } from "@keinguyen/hooks/useId";

function Component() {
	const id = useId(); // consistently unique id through re-rendering, only change when be unmounted

	return <div id={id}>current div id {id}</div>;
}

2. useDebounceCallback

// context.ts
import { useDebounceCallback } from "@keinguyen/hooks/useDebounceCallback";

function Component() {
	const [value, setValue] = React.useState("");
	const [] = React.useState("");
	const handleSearch = useDebounceCallback(async (searchTerms: string) => {
		// handle call API by input searchTerms here
	}, 250);

	const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
		const { value } = evt.target;

		setValue(value);
		handleSearch(value);
	};

	return <input onChange={handleChange} />;
}