{"id":20414905,"url":"https://github.com/asifvora/react-hooks","last_synced_at":"2026-06-07T19:31:44.448Z","repository":{"id":134925676,"uuid":"157819887","full_name":"asifvora/react-hooks","owner":"asifvora","description":"React hooks","archived":false,"fork":false,"pushed_at":"2018-11-16T07:05:49.000Z","size":95,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-15T13:35:43.586Z","etag":null,"topics":["hooks","hooks-api-react","react","react-hook","react-hooks","reactjs"],"latest_commit_sha":null,"homepage":null,"language":null,"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/asifvora.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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":"2018-11-16T05:58:54.000Z","updated_at":"2019-04-12T06:08:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"5e2ff099-6f75-476b-951f-fc3eb06bd1c4","html_url":"https://github.com/asifvora/react-hooks","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/asifvora%2Freact-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asifvora%2Freact-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asifvora%2Freact-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/asifvora%2Freact-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/asifvora","download_url":"https://codeload.github.com/asifvora/react-hooks/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241959861,"owners_count":20049327,"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":["hooks","hooks-api-react","react","react-hook","react-hooks","reactjs"],"created_at":"2024-11-15T06:13:16.738Z","updated_at":"2026-06-07T19:31:42.785Z","avatar_url":"https://github.com/asifvora.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Hooks\n![image](https://github.com/asifvora/react-hooks/blob/master/react-hooks.png)\n\nAs the ReactJs library gets new updates, there are a lot of things being added and a few that are deprecated too. ReactJs is becoming more powerful day by day due to such updates. As a developer, you need to keep yourself up to date with new features coming out in every version.\n\n# Have you heard about React Hooks?\n\nWell, React Hooks, a feature which is available in React v16.7.0-alpha, is something awesome you should know about.\n\n# Use with react this version\n\n```\n$ npm install react@16.7.0-alpha.0 --save\n$ npm install react-dom@16.7.0-alpha.0 --save\n```\n\n## Hooks\nHooks in React.\n\n### Basic Hooks\n- `useState`\n- `useEffect`\n- `useContext`\n\n## Additional Hooks\n- `useReducer`\n- `useCallback`\n- `useMemo`\n- `useRef`\n- `useImperativeMethods`\n- `useMutationEffect` _Note: currently identical to `useEffect`_\n- `useLayoutEffect` _Note: currently identical to `useEffect`_\n\n## State Hook\nThis example renders a counter. When you click the button, it increments the value:\n\n```js\nimport { useState } from 'react';\n\nfunction Example() {\n  // Declare a new state variable, which we'll call \"count\"\n  const [count, setCount] = useState(0);\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eYou clicked {count} times\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e setCount(count + 1)}\u003e\n        Click me\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n\n```\n\n### Declaring multiple state variables\nYou can use the State Hook more than once in a single component:\n```js\nfunction ExampleWithManyStates() {\n  // Declare multiple state variables!\n  const [age, setAge] = useState(42);\n  const [fruit, setFruit] = useState('banana');\n  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);\n  // ...\n}\n```\n\n## Effect Hook\nThe Effect Hook, `useEffect`, adds the ability to perform side effects from a function component. It serves the same purpose as `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` in React classes, but unified into a single API.\n\nFor example, this component sets the document title after React updates the DOM:\n```js\nimport { useState, useEffect } from 'react';\n\nfunction Example() {\n  const [count, setCount] = useState(0);\n\n  // Similar to componentDidMount and componentDidUpdate:\n  useEffect(() =\u003e {\n    // Update the document title using the browser API\n    document.title = `You clicked ${count} times`;\n  });\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003eYou clicked {count} times\u003c/p\u003e\n      \u003cbutton onClick={() =\u003e setCount(count + 1)}\u003e\n        Click me\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n\n## Some Example Usage\n\nTo use hooks in a functional component!\n\n```js\nimport React, { useState, useEffect, useReducer, memo } from 'react';\nconst style = {\n  height: 60,\n  width: 50,\n  margin: 10,\n}\n\nfunction reducer(state, action) {\n  switch (action.type) {\n    case 'reset':\n      return { count: action.payload };\n    case 'increment':\n      return { count: state.count + 1 };\n    case 'decrement':\n      return { count: state.count - 1 };\n    default:\n      // A reducer must always return a valid state.\n      // Alternatively you can throw an error if an invalid action is dispatched.\n      return state;\n  }\n}\n\nfunction Counter({ initialCount }) {\n  const [state, dispatch] = useReducer(reducer, initialState, { type: 'reset', payload: initialCount });\n\n  return (\n    \u003cdiv\u003e\n      \u003cp style={{ fontSize: 100 }}\u003e\u003cb\u003e{state.count}\u003c/b\u003e\u003c/p\u003e\n      \u003cbutton style={style} onClick={() =\u003e dispatch({ type: 'reset', payload: initialCount })}\u003e\n        Reset\n      \u003c/button\u003e\n      \u003cbutton style={style} onClick={() =\u003e dispatch({ type: 'increment' })}\u003e\n        ➕\n      \u003c/button\u003e\n      \u003cbutton style={style} onClick={() =\u003e dispatch({ type: 'decrement' })}\u003e\n        ➖\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n\nconst MyComponentMemo = memo((props) =\u003e{\n  return (\n    \u003c\u003e\n      \u003cdiv style={{ fontSize: 50 }}\u003e{props.name}\u003c/div\u003e\n    \u003c/\u003e\n  )\n});\n\nfunction MyComponent() {\n  const [name, setName] = useState('😍');\n\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cheader className=\"App-header\"\u003e\n        \u003cdiv\u003e\n          \u003cbr /\u003e\n          \u003cinput type=\"text\" onChange={(e) =\u003e setName(e.target.value)} /\u003e\n          \u003cMyComponentMemo name={name} /\u003e\n          {Counter({ initialCount: 0 })}\n        \u003c/div\u003e\n      \u003c/header\u003e\n    \u003c/div \u003e\n  );\n}\n\n```\n## ✌️ Rules of Hooks\n\nHooks are JavaScript functions, but they have two additional rules:\n\n- _Note: Only call Hooks at the top level. Don’t try to call Hooks inside loops, conditions, or nested functions._\n- _Note: Only call Hooks from React function components. Don’t try to call Hooks from regular JavaScript functions._\n\n## Documentation\n\nReact Hooks API here: https://reactjs.org/docs/hooks-reference.html\n\n## Questions?🤔 \n  \nHit me on [![Twitter URL](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/007_dark_shadow)\n[![Medium](https://img.shields.io/badge/Medium-asifvora-brightgreen.svg)](https://medium.com/@asifvora)\n[![LinkedIn](https://img.shields.io/badge/LinkedIn-asifvora-blue.svg)](https://www.linkedin.com/in/asif-vora/) \n[![Instagram](https://img.shields.io/badge/Instagram-Asif%20Vora-green.svg)](https://www.instagram.com/007_dark_shadow/) \n\n# How to contribute?\n\nCheck out contribution guidelines 👉[CONTRIBUTING.md](https://github.com/asifvora/react-hooks/blob/master/CONTRIBUTING.md)\n\n## License\n\nMIT License\n\nCopyright (c) 2018 Asif Vora\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasifvora%2Freact-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fasifvora%2Freact-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fasifvora%2Freact-hooks/lists"}