# use-merge

> ⚛️ 💡 Simplify the relationships between multiple hooks.

Latest version **0.0.1-alpha.4** (published 2020-10-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-merge
pnpm add use-merge
yarn add use-merge
bun add use-merge
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1-alpha.4 |
| Published | 2020-10-30 |
| First published | 2020-10-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 15.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Alex Thomas |
| Maintainers | cawfree |
| Keywords | react, react-native, hooks, combine, merge, synchronize |

## Links

- npm: https://www.npmjs.com/package/use-merge
- Repository: https://github.com/cawfree/use-merge
- npm.io page: https://npm.io/package/use-merge

## Dependencies (4)

- [lodash.get](https://npm.io/package/lodash.get.md) ^4.4.2
- [combine-errors](https://npm.io/package/combine-errors.md) ^3.0.3
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8
- [react-fast-compare](https://npm.io/package/react-fast-compare.md) ^3.2.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.1-alpha.4 (latest) — 2020-10-30
- 0.0.1-alpha.3 — 2020-10-29
- 0.0.1-alpha.2 — 2020-10-27
- 0.0.1-alpha.1 — 2020-10-27

## README

# use-merge
Simplify the relationships between multiple hooks.

### 🚀 Getting Started

Using [**Yarn**](https://yarnpkg.com):

```sh
yarn add use-merge
```

### 😲 Everything and your mother is a hook now.
Functional components are becoming increasingly complex; the wide availability of capable hooks and their applicability to the management of application state logic has made it commonplace to embed multiple hooks in a single component. Depending on the availability of asynchronous data, hooks can easily become desynchronized with one-another and necessitate multiple render lifecycles in order to harmonize.

What's worse, is that hooks dependent on the output of previously declared hooks require non-trivial and repetitive manual management of loading and error states to manage the render result.

**Take the following:**

```javascript
import { ActivityIndicator } from "react-native";
import { useQuery, gql } from "@apollo/graphql";

import { DataComponent, ErrorComponent } from ".";

export default function SomeComponent() {
  const { loading: loadingA, error: errorA, data: dataA } = useQuery(gql`...`);
  const { loading: loadingB, error: errorB, data: dataB } = useQuery(gql`...`);
  const { loading: loadingC, error: errorC, data: dataC } = useQuery(gql`...`);
  
  const loading = loadingA || loadingB || loadingC;
  const error = errorA || errorB || errorC; // Not to mention, this swallows errors...
  
  if (loading) {
    return <ActivityIndicator />;
  } else if (error) {
    return <ErrorComponent />;
  }
  return <DataComponent a={dataA} b={dataB} c={dataC} />;
}
```

> We've all seen it. And it's becoming increasingly more common as hooks get ever more awesome.

### 🤔 So... what's the answer to the problem of multiple hooks? Why, a hook of course!

With `use-merge`, you can combine the outputs of multiple hooks _and_ synchronize their requests to re-render:

```javascript
import { ActivityIndicator } from "react-native";
import { useQuery, gql } from "@apollo/graphql";
import useMerge, { By } from "use-merge";

import { DataComponent, ErrorComponent } from ".";

export default function SomeComponent() {
  const { a, b, c, merged: { loading, error } } = useMerge({
    a: useQuery(gql`...`),
    b: useQuery(gql`...`),
    c: useQuery(gql`...`),
  })({ loading: By.Truthy, error: By.Error });
  
  if (loading) {
    return <ActivityIndicator />;
  } else if (error) {
    return <ErrorComponent />;
  }
  return <DataComponent a={a.data} b={b.data} c={c.data} />;
}
```

This makes it much simpler, consistent and more efficient to handle the processing of multiple hooks within the scope of a single function.

### 🤔 What about hooks which are dependent upon the output of others?

We got you covered. Pass a `function` into `useMerge` to retrieve the last merged state. This is also exported alongside [`lodash.get`](https://lodash.com/docs/4.17.15#get) so you can safely interrogate deeply-nested, potentially uninitialized, objects.

```javascript
 const { a, b, c, merged: { loading, error } } = useMerge(({ a }, get) => ({
    a: useQuery(gql`...`),
    b: useQuery(gql`...`),
    c: useQuery(gql`...${get(a, 'data.id')}`),
  }))({ loading: By.Truthy, error: By.Error });
```

## ✌️ License
[**MIT**](./LICENSE)

---
_Source: https://npm.io/package/use-merge · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._