Useful hooks for React application
npm install @rozhkov/react-useful-hooks[LICENSE]: https://github.com/rozhkovs/react-useful-hooks/blob/HEAD/LICENSE
[AUTHOR]: https://github.com/rozhkovs
This library aims to provide the most necessary hooks, which are required in typical React or React Native app;
shell
npm install @rozhkov/react-useful-hooks
`
For yarn
`shell
yarn add @rozhkov/react-useful-hooks
`Navigation
- Installation
- Hooks
- useInit
- useIsFirstRender
- usePrevious
- useStableCallback
- useMemoObject
- useMemoArray
- useStateRef
- useIsChanged
- useArgByRef
- useChangeCounter
- Author
- Was it helpful?
- LicenseHooks
$3
Initializes a value during component mounting and returns it each time throughout the component lifecycle.Example
`typescript
// 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
`typescript
(callback: () => T) => T;
`$3
At first render, the result is true, then false.
Example
`typescript
// first render
const isFirst = useIsFirstRender(); // The return is true.// after
const isFirst = useIsFirstRender(); // The return is false.
`
Interface
`typescript
() => boolean;
`$3
Returns a previous argument that was passed during a previous render.
Example
`typescript
// 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
`typescript
(arg: T) => T | undefined;
`$3
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
`typescript
// 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
`typescript
(callback: T | null | undefined) => T;
`$3
Return a memoized object, comparing values of its keys.
Example
`typescript
const memoizedObj = useMemoObject({
fieldValue1,
fieldValue2,
...otherFields
});// is equal
const memoizedObj = useMemo(() => ({
fieldValue1,
fieldValue2,
...otherFields
}), [
fieldValue1,
fieldValue2,
...otherFields
]);
`
Interface
`typescript
(obj: T) => T;
`$3
Return a memoized array, comparing its values.
Example
`typescript
const memoizedArray = useMemoArray([
value1,
value2,
...otherValues
]);// is equal
const memoizedArray = useMemo(() => ([
value1,
value2,
...otherValues
]), [
value1,
value2,
...otherValues
]);
`
Interface
`typescript
(array: T) => T;
`$3
Similar to useState, but it also returns a third item "ref" with the most recent value.
Example
`typescript
const [, setValue, valueRef] = useStateRef(0);useEffect(() => {
valueRef.current; // 0
setValue(1);
valueRef.current; // 1
}, []);
`
Interface
`typescript
() => [S | undefined, Dispatch>, Ref];
(initialState: S | (() => S)) => [S, Dispatch>, Ref];
`$3
Returns the result of comparing between a current argument and a previous argument.
Example
`typescript
// 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 true
`
Interface
`typescript
(value: any) => false;
`$3
Returns 'ref' with the most recent value which was passed to the hook.
Example
`typescript
// first render
const ref = useArgByRef(0);
ref.current; // 0// second render
const ref = useArgByRef([]);
ref.current; // []
`
Interface
`typescript
(value: T) => {readonly current: T};
`$3
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
`typescript
// 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 1
`
Interface
`typescript
(value: T, compare?: (v1: T, v2: T) => boolean) => number;
``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.
Rozhkov React Useful Hooks is MIT licensed, as found in the [LICENSE] file.