{"id":13450474,"url":"https://github.com/mamal72/react-optimistic-ui-hook","last_synced_at":"2025-05-07T08:13:00.824Z","repository":{"id":40867168,"uuid":"236231497","full_name":"mamal72/react-optimistic-ui-hook","owner":"mamal72","description":"⚛️ Minimal \"optimistic UI\" pattern implementation with a React Hook","archived":false,"fork":false,"pushed_at":"2023-01-05T05:43:56.000Z","size":1957,"stargazers_count":24,"open_issues_count":12,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-07T08:12:49.538Z","etag":null,"topics":["frontend","optimistic-ui","react","react-hooks","ui","ux"],"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/mamal72.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-01-25T21:20:38.000Z","updated_at":"2025-04-06T12:30:48.000Z","dependencies_parsed_at":"2023-02-03T14:00:19.736Z","dependency_job_id":null,"html_url":"https://github.com/mamal72/react-optimistic-ui-hook","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mamal72%2Freact-optimistic-ui-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mamal72%2Freact-optimistic-ui-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mamal72%2Freact-optimistic-ui-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mamal72%2Freact-optimistic-ui-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mamal72","download_url":"https://codeload.github.com/mamal72/react-optimistic-ui-hook/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252839296,"owners_count":21812090,"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":["frontend","optimistic-ui","react","react-hooks","ui","ux"],"created_at":"2024-07-31T07:00:34.960Z","updated_at":"2025-05-07T08:13:00.804Z","avatar_url":"https://github.com/mamal72.png","language":"TypeScript","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"![NPM](https://img.shields.io/npm/l/react-optimistic-ui-hook) [![Build Status](https://travis-ci.com/mamal72/react-optimistic-ui-hook.svg?branch=master)](https://travis-ci.com/mamal72/react-optimistic-ui-hook) [![codecov](https://codecov.io/gh/mamal72/react-optimistic-ui-hook/branch/master/graph/badge.svg)](https://codecov.io/gh/mamal72/react-optimistic-ui-hook) ![David](https://img.shields.io/david/mamal72/react-optimistic-ui-hook) ![npm](https://img.shields.io/npm/v/react-optimistic-ui-hook) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-optimistic-ui-hook) ![npm](https://img.shields.io/npm/dm/react-optimistic-ui-hook)\n\n# react-optimistic-ui-hook\n\nMinimal zero dependency \"optimistic UI\" pattern implementation in a React Hook.\n\n\n## What is \"Optimistic UI\"?\n\n\u003e Optimistic UIs don’t wait for an operation to finish to update to the final state. They immediately switch to the final state, showing fake data for the time while the real operation is still in-progress. [Read More Here](https://uxplanet.org/optimistic-1000-34d9eefe4c05)\n\nNote that you can search for \"optimistic UI\" and read more about this pattern and how it works. It simply lets your app looks faster by expecting a successful call to something like an API before getting the real response and update the interface based on that expectation.\n\n\n## Installation\n\nUsing NPM:\n\n```bash\nnpm install react-optimistic-ui-hook\n```\n\nUsing Yarn:\n\n```bash\nyarn add react-optimistic-ui-hook\n```\n\n\n## Usage\n\n```tsx\nimport React from 'react'\nimport { useOptimisticUI } from 'react-optimistic-ui-hook'\n\nconst USERNAME = 'mamal72'\nconst PREDICTED_AVATAR_URL = 'https://avatars0.githubusercontent.com/u/810438?v=4'\nconst DELAY_IN_MS = 2000\n\nasync function getGithubAvatarURL(username: string): Promise\u003cstring\u003e {\n  const response = await fetch(`https://api.github.com/users/${username}`)\n  const data = await response.json()\n\n  return new Promise((resolve) =\u003e {\n    setTimeout(() =\u003e {\n      resolve(data.avatar_url)\n    }, DELAY_IN_MS);\n  })\n}\n\nexport function GithubAvatar() {\n  const { status, result, error } = useOptimisticUI\u003cstring\u003e(() =\u003e getGithubAvatarURL(USERNAME), PREDICTED_AVATAR_URL)\n\n  if (status === 'failed') {\n    // The \"result\" will be the predicted image url passed to the Hook,\n    // But \"error\" is set to the raised error in the passed promise\n    console.error(\"Failed to fetch image!\", error)\n  }\n\n  if (status === 'loading') {\n    // The \"result\" will be the predicted image passed to the Hook again!\n    console.log('Loading image!')\n  }\n\n  if (status === 'succeed') {\n    // The \"result\" will be the resolved promise response here!\n    console.log(\"Resolved image!\", result)\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003cimg src={result} alt=\"avatar\" /\u003e\n      \u003cp\u003eStatus: {status}\u003c/p\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n\n## Contribution\n\nYou can report bugs and issues [here](https://github.com/mamal72/react-optimistic-ui-hook/issues/new).\n\nYou can also send a PR if you feel like you can improve or fix something. Don't forget to write/update tests for your changes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmamal72%2Freact-optimistic-ui-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmamal72%2Freact-optimistic-ui-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmamal72%2Freact-optimistic-ui-hook/lists"}