{"id":24194406,"url":"https://github.com/nuraj250/react-user-data-cache","last_synced_at":"2025-07-13T07:40:19.491Z","repository":{"id":259853007,"uuid":"879637420","full_name":"Nuraj250/react-user-data-cache","owner":"Nuraj250","description":"React app demonstrating user data fetching with caching and custom hooks for efficient state management","archived":false,"fork":false,"pushed_at":"2024-11-04T04:44:58.000Z","size":15,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-13T18:42:01.096Z","etag":null,"topics":["beginner-friendly","context-api","counter-app","frontend","javascript","react","react-context","react-hooks","react-project","state-management","usecontext","useeffect","usereducer","usestate"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Nuraj250.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-28T09:30:02.000Z","updated_at":"2024-11-04T04:45:02.000Z","dependencies_parsed_at":"2024-10-28T12:35:41.875Z","dependency_job_id":"bebef96f-afb9-4fd4-b5f9-af3eb9984c9b","html_url":"https://github.com/Nuraj250/react-user-data-cache","commit_stats":null,"previous_names":["nuraj250/react-hooks-counter-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nuraj250%2Freact-user-data-cache","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nuraj250%2Freact-user-data-cache/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nuraj250%2Freact-user-data-cache/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nuraj250%2Freact-user-data-cache/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Nuraj250","download_url":"https://codeload.github.com/Nuraj250/react-user-data-cache/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241622601,"owners_count":19992504,"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":["beginner-friendly","context-api","counter-app","frontend","javascript","react","react-context","react-hooks","react-project","state-management","usecontext","useeffect","usereducer","usestate"],"created_at":"2025-01-13T18:36:23.271Z","updated_at":"2025-03-03T07:15:36.988Z","avatar_url":"https://github.com/Nuraj250.png","language":"JavaScript","readme":"# React User Data Cache\n\nA React application demonstrating user data fetching with caching using custom hooks for efficient state management. This project showcases how to separate API calls, handle loading states, and cache data to improve performance.\n\n## Table of Contents\n\n- [Overview](#overview)\n- [Features](#features)\n- [Folder Structure](#folder-structure)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Technologies Used](#technologies-used)\n- [License](#license)\n\n## Overview\n\nThis project is built to demonstrate the usage of multiple React hooks, such as `useState`, `useEffect`, `useCallback`, and `useMemo`, for fetching and caching user data from a mock API. The custom hook encapsulates data-fetching logic, making the code reusable and easier to maintain.\n\n## Features\n\n- Fetches user data with a simulated API call.\n- Caches fetched data to reduce redundant API requests.\n- Uses `useCallback` for memoizing data-fetching functions.\n- Uses `useMemo` for optimizing rendering of user details.\n- Provides navigation between user profiles.\n- Demonstrates separation of concerns with custom hooks and services.\n\n## Folder Structure\n\n```\nmy-react-app/\n│\n├── public/\n│   └── index.html\n│\n├── src/\n│   ├── components/\n│   │   ├── UserProfile.js\n│   │   └── App.js\n│   │\n│   ├── services/\n│   │   └── userService.js\n│   │\n│   ├── hooks/\n│   │   └── useFetchUserData.js\n│   │\n│   ├── index.js\n│   └── styles/\n│       └── UserProfile.css\n│\n├── package.json\n└── README.md\n```\n\n## Installation\n\n1. **Clone the repository**:\n   ```bash\n   git clone https://github.com/Nuraj250/react-user-data-cache.git\n   cd react-user-data-cache\n   ```\n\n2. **Install the dependencies**:\n   ```bash\n   npm install\n   ```\n\n3. **Start the development server**:\n   ```bash\n   npm start\n   ```\n\n   The app will open in your browser at `http://localhost:3000`.\n\n## Usage\n\n- The app displays user information with a simulated API call.\n- Navigate between user profiles using the \"Next User\" and \"Previous User\" buttons.\n- The app fetches user data only when it’s not available in the cache, reducing unnecessary API calls.\n- Check the console to see when the data is being fetched or loaded from the cache.\n\n## Technologies Used\n\n- **React**: Frontend library for building user interfaces.\n- **JavaScript**: Programming language for logic implementation.\n- **Custom Hooks**: Encapsulate and reuse logic across components.\n- **CSS**: Styling for components.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuraj250%2Freact-user-data-cache","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnuraj250%2Freact-user-data-cache","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuraj250%2Freact-user-data-cache/lists"}