[LICENSE]: https://github.com/rozhkovs/react-useful-hooks/blob/HEAD/LICENSE
[AUTHOR]: https://github.com/rozhkovs

🔥 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
``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?
- License

Hooks

$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;
``

👨‍💻 Author

[Sergey Rozhkov][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.