{"id":18369854,"url":"https://github.com/cawfree/use-merge","last_synced_at":"2025-04-06T18:32:35.841Z","repository":{"id":57388209,"uuid":"307526111","full_name":"cawfree/use-merge","owner":"cawfree","description":"⚛️ 💡 Simplify the relationships between multiple hooks.","archived":false,"fork":false,"pushed_at":"2020-10-30T02:04:25.000Z","size":334,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-18T15:47:14.015Z","etag":null,"topics":["combine","hooks","merge","react","react-native","synchronize"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cawfree.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-26T22:59:57.000Z","updated_at":"2021-12-08T02:01:39.000Z","dependencies_parsed_at":"2022-09-26T16:50:57.760Z","dependency_job_id":null,"html_url":"https://github.com/cawfree/use-merge","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Fuse-merge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Fuse-merge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Fuse-merge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cawfree%2Fuse-merge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cawfree","download_url":"https://codeload.github.com/cawfree/use-merge/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247531350,"owners_count":20953937,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["combine","hooks","merge","react","react-native","synchronize"],"created_at":"2024-11-05T23:32:37.804Z","updated_at":"2025-04-06T18:32:34.169Z","avatar_url":"https://github.com/cawfree.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# use-merge\nSimplify the relationships between multiple hooks.\n\n### 🚀 Getting Started\n\nUsing [**Yarn**](https://yarnpkg.com):\n\n```sh\nyarn add use-merge\n```\n\n### 😲 Everything and your mother is a hook now.\nFunctional 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.\n\nWhat'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.\n\n**Take the following:**\n\n```javascript\nimport { ActivityIndicator } from \"react-native\";\nimport { useQuery, gql } from \"@apollo/graphql\";\n\nimport { DataComponent, ErrorComponent } from \".\";\n\nexport default function SomeComponent() {\n  const { loading: loadingA, error: errorA, data: dataA } = useQuery(gql`...`);\n  const { loading: loadingB, error: errorB, data: dataB } = useQuery(gql`...`);\n  const { loading: loadingC, error: errorC, data: dataC } = useQuery(gql`...`);\n  \n  const loading = loadingA || loadingB || loadingC;\n  const error = errorA || errorB || errorC; // Not to mention, this swallows errors...\n  \n  if (loading) {\n    return \u003cActivityIndicator /\u003e;\n  } else if (error) {\n    return \u003cErrorComponent /\u003e;\n  }\n  return \u003cDataComponent a={dataA} b={dataB} c={dataC} /\u003e;\n}\n```\n\n\u003e We've all seen it. And it's becoming increasingly more common as hooks get ever more awesome.\n\n### 🤔 So... what's the answer to the problem of multiple hooks? Why, a hook of course!\n\nWith `use-merge`, you can combine the outputs of multiple hooks _and_ synchronize their requests to re-render:\n\n```javascript\nimport { ActivityIndicator } from \"react-native\";\nimport { useQuery, gql } from \"@apollo/graphql\";\nimport useMerge, { By } from \"use-merge\";\n\nimport { DataComponent, ErrorComponent } from \".\";\n\nexport default function SomeComponent() {\n  const { a, b, c, merged: { loading, error } } = useMerge({\n    a: useQuery(gql`...`),\n    b: useQuery(gql`...`),\n    c: useQuery(gql`...`),\n  })({ loading: By.Truthy, error: By.Error });\n  \n  if (loading) {\n    return \u003cActivityIndicator /\u003e;\n  } else if (error) {\n    return \u003cErrorComponent /\u003e;\n  }\n  return \u003cDataComponent a={a.data} b={b.data} c={c.data} /\u003e;\n}\n```\n\nThis makes it much simpler, consistent and more efficient to handle the processing of multiple hooks within the scope of a single function.\n\n### 🤔 What about hooks which are dependent upon the output of others?\n\nWe 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.\n\n```javascript\n const { a, b, c, merged: { loading, error } } = useMerge(({ a }, get) =\u003e ({\n    a: useQuery(gql`...`),\n    b: useQuery(gql`...`),\n    c: useQuery(gql`...${get(a, 'data.id')}`),\n  }))({ loading: By.Truthy, error: By.Error });\n```\n\n## ✌️ License\n[**MIT**](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcawfree%2Fuse-merge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcawfree%2Fuse-merge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcawfree%2Fuse-merge/lists"}