🔥 React Useful Hooks 🔥
This library aims to provide the most necessary hooks, which are required in typical React or React Native app;
Installation
For npm
npm install @rozhkov/react-useful-hooksFor yarn
yarn add @rozhkov/react-useful-hooksNavigation
Hooks
useInit
Initializes a value during component mounting and returns it each time throughout the component lifecycle.
Example
// first render
const initialized = useInit(() => {}); // the callback is called.
// after
const initialized = useInit(() => {}); // the callback is not called, the return value is not changed.Interface
<T>(callback: () => T) => T;useIsFirstRender
At first render, the result is true, then false.
Example
// first render
const isMouting = useIsFirstRender(); // The return is true.
// after
const isMouting = useIsFirstRender(); // The return is false.Interface
() => boolean;usePrevious
Returns a previous argument that was passed during a previous render.
Example
// first render
const value = usePrevious('My arg'); // The first result is always undefined.
// second render
const value = usePrevious('Not my arg'); // The return is 'My arg'.Interface
<T>(arg: T) => T | undefined;useStableCallback
Returns a new callback that preserves the reference between renderers. If you call a function, the last function that was passed to the argument will be called.
Example
// first render
const wrapped = useStableCallback(() => 'Some function');
wrapped(); // 'Some function'
// second render
const wrapped = useStableCallback(() => 'So, I have new function');
wrapped(); // 'So, I have new function', but current 'wrapped' === previous 'wrapped'.Interface
<T extends AnyFunc>(callback: T | null | undefined) => T;useMemoObject
Return a memoized object, comparing values of its keys.
Example
const memoizedObj = useMemoObject({
fieldValue1,
fieldValue2,
...otherFields
});
// is equal
const memoizedObj = useMemo(() => ({
fieldValue1,
fieldValue2,
...otherFields
}), [
fieldValue1,
fieldValue2,
...otherFields
]);Interface
<T extends object>(obj: T) => T;useMemoArray
Return a memoized array, comparing its values.
Example
const memoizedArray = useMemoArray([
value1,
value2,
...otherValues
]);
// is equal
const memoizedArray = useMemo(() => ([
value1,
value2,
...otherValues
]), [
value1,
value2,
...otherValues
]);Interface
<T extends any[]>(array: T) => T;useStateRef
Similar to useState, but it also returns a third item "ref" with the most recent value.
Example
const [, setValue, valueRef] = useStateRef(0);
useEffect(() => {
valueRef.current; // 0
setValue(1);
valueRef.current; // 1
}, []);Interface
<S = undefined>() => [S | undefined, Dispatch<SetStateAction<S | undefined>>, Ref<S | undefined>];
<S>(initialState: S | (() => S)) => [S, Dispatch<SetStateAction<S>>, Ref<S>];useIsChanged
Returns the result of comparing between a current argument and a previous argument.
Example
// first render
const value = useIsChanged(0); // The return is false
// second render
const value = useIsChanged(0); // The return is false
// or
const value = useIsChanged(1); // The return is trueInterface
(value: any) => false;useArgByRef
Returns 'ref' with the most recent value which was passed to the hook.
Example
// first render
const ref = useArgByRef(0);
ref.current; // 0
// second render
const ref = useArgByRef([]);
ref.current; // []Interface
<T>(value: T) => {readonly current: T};useChangeCounter
Returns the count of how many times the argument has changed throughout the component lifecycle. This can be helpful when you have complex conditions in useEffect, etc.
Example
// first render
const count = useChangeCounter('init'); // The return is 0
// second render
const count = useChangeCounter('init'); // The return is 0
// or
const count = useChangeCounter('changed'); // The return is 1Interface
<T>(value: T, compare?: (v1: T, v2: T) => boolean) => number;👨💻 Author
🎯 Was it helpful?
Do you like it and find it helpful? You can help this project in the following way:
- ⭐ Put the star.
- 💡 Suggest your ideas.
- 😉 Open a founded issue.
📄 License
Rozhkov React Useful Hooks is MIT licensed, as found in the LICENSE file.