# red-react-lib

This lib points to be a shared codebase for the different projects inside the WP.

For the time being we are using it as a [git
subtree](https://www.atlassian.com/blog/git/alternatives-to-git-submodule-git-subtree)

## Updating this lib

In order to update/commit an update, the code needs to be built before pushing.

### To build the project run

```
yarn install
yarn build
```

## Modules

<dl>
<dt><a href="#module_hooks">hooks</a></dt>
<dd></dd>
</dl>

## Functions

<dl>
<dt><a href="#usePrevious">usePrevious(value)</a></dt>
<dd><p>usePrevious Hook</p>
<p>Got from <a href="https://usehooks.com/usePrevious/">https://usehooks.com/usePrevious/</a>
It saves the previous value of props or state</p>
</dd>
<dt><a href="#usePromiseCallback">usePromiseCallback(promise, deps, delayMS)</a></dt>
<dd><p>usePromiseCallback Hook</p>
<p>Hook dedicated to offer a sync way of accessing a promise state.</p>
<p>Keeps the last result until new results are loaded, to avoid UI flashes.</p>
<p>Supports a delayMS param to customise the loading threshold, to avoid UI flashes.</p>
<p>Only processes the last promise call.</p>
</dd>
<dt><a href="#usePromise">usePromise(promise, deps, delayMS)</a></dt>
<dd><p>usePromise Hook</p>
<p>Wrapped <a href="module:hooks.usePromiseCallback">usePromiseCallback</a>.</p>
<p>It gets triggered on init and every time the args change by default.</p>
<p>Useful to fetch page data.</p>
</dd>
</dl>

<a name="module_hooks"></a>

## hooks
<a name="usePrevious"></a>

## usePrevious(value)
usePrevious Hook

Got from https://usehooks.com/usePrevious/
It saves the previous value of props or state

**Kind**: global function  

| Param | Type | Description |
| --- | --- | --- |
| value | <code>\*</code> | The value to save |

**Example**  
```js
const [state, setState] = React.useState()
const prev = usePrevious(state)
```
<a name="usePromiseCallback"></a>

## usePromiseCallback(promise, deps, delayMS)
usePromiseCallback Hook

Hook dedicated to offer a sync way of accessing a promise state.

Keeps the last result until new results are loaded, to avoid UI flashes.

Supports a delayMS param to customise the loading threshold, to avoid UI flashes.

Only processes the last promise call.

**Kind**: global function  

| Param | Type | Description |
| --- | --- | --- |
| promise | <code>Promise</code> | The promise that would be wrapped |
| deps | <code>Array.&lt;any&gt;</code> | extra deps used to re-create the callback |
| delayMS | <code>number</code> | The delay in ms to switch the loading state to true |

**Example**  
```js
const [callback, result, loading, err] = usePromiseCallback(Promise.resolve, [], 500)
```
<a name="usePromise"></a>

## usePromise(promise, deps, delayMS)
usePromise Hook

Wrapped [usePromiseCallback](module:hooks.usePromiseCallback).

It gets triggered on init and every time the args change by default.

Useful to fetch page data.

**Kind**: global function  

| Param | Type | Description |
| --- | --- | --- |
| promise | <code>Promise</code> | The promise that would be wrapped |
| deps | <code>Array.&lt;any&gt;</code> | deps to call the function with |
| delayMS | <code>number</code> | The delay in ms to switch the loading state to true |

**Example**  
```js
const [callback, result, loading, err] = usePromise(Promise.resolve, ["hello"], 500)
```