{"id":23761004,"url":"https://github.com/neicore/react-hooks","last_synced_at":"2026-03-02T04:02:38.162Z","repository":{"id":129678377,"uuid":"588513840","full_name":"neicore/react-hooks","owner":"neicore","description":"covering the basics of react hooks","archived":false,"fork":false,"pushed_at":"2023-01-16T05:55:30.000Z","size":39,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-07T18:54:23.285Z","etag":null,"topics":["react","react-hooks","react-router","typescript"],"latest_commit_sha":null,"homepage":"https://react-hooks-sepia.vercel.app","language":"TypeScript","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/neicore.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,"zenodo":null}},"created_at":"2023-01-13T09:56:22.000Z","updated_at":"2025-03-05T07:09:33.000Z","dependencies_parsed_at":"2023-05-09T18:32:16.165Z","dependency_job_id":null,"html_url":"https://github.com/neicore/react-hooks","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/neicore/react-hooks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neicore%2Freact-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neicore%2Freact-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neicore%2Freact-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neicore%2Freact-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/neicore","download_url":"https://codeload.github.com/neicore/react-hooks/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neicore%2Freact-hooks/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29992286,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-02T01:47:34.672Z","status":"online","status_checked_at":"2026-03-02T02:00:07.342Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["react","react-hooks","react-router","typescript"],"created_at":"2024-12-31T20:39:07.635Z","updated_at":"2026-03-02T04:02:38.153Z","avatar_url":"https://github.com/neicore.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Hooks Basics\n\nLearning react hooks with practice. This read me is dedicated to my future self. I know you are here because you took one week break from coding and now you have forgotten everything.\n\n### What are hooks\n\nFuctions that let you \"hook\" into react state in functional components\n\n### Rules of writing hooks\n\n- Don't call hooks inside loops, conditions, or nested functions. React won't be able to preserve the state of hooks between multuple `useState` and `useEffect` calls\n\n- Don't call hooks inside regular js functions. React functional components and custom components are allowed.\n\n## useState\n\n`useState` hook is used to manage state within a functional component. The `useState` function takes an initial state as the argument and then returns an array of the state and a function that can be used to update that state. The initial state can be null, number, string, array, object, etc.\n\n### Syntax examples\n\n```JSX\nconst arr = useState()\n```\n\nMost people prefers to destructure the returned array.\n\n```JSX\nconst [value, setValue] = useState() // initial state is null\nconst [word, setWord] = useState('') //  initial state is an empty string\nconst [numb, setNumb] = useState(5) // initial state is a number\nconst [sithLord, setSithLord] = useState({name: 'Darth Vader', age: 44}) // initial state is an object\n```\n\nIf you have an initial state that requires an expensive computation, you can call a function that returns your initial state as the argument in `useState`.\n\n```JSX\nimport { useState } from \"react\"\n\nconst myFunctionalComponent = (props) =\u003e {\n    const expensiveComputation = (argValue) =\u003e {\n        // Does some expensive computation and then returns the initial state value\n    }\n\n    const [value, setValue] = useState(() =\u003e expensiveComputation(props.argValue))\n}\n```\n\n## useEffect\n\nThis hook gets called everytime a component renders / rerenders. It takes two arguments, the first is an anonymous function where you can put in all the code you want to be executed whenever the component rerenders and the second argument is a depencency array which will cause the hook to be called whenever the values passed change. You can have more than once `useEffect` in a component and they will fire off in order.\n\n### Syntax examples\n\nCan be used without a dependency array\n\n```JSX\nuseEffect(() =\u003e {\n    //code to be executed whenever the component rerenders\n})\n```\n\nCan be used with an empty dependency array\n\n```JSX\nuseEffect(() =\u003e {\n    //code to be executed just once\n}, [])\n```\n\nWith dependency array\n\n```JSX\nuseEffect(() =\u003e {\n    //code to be executed whenever the component rerenders because value1 or value2 changed\n}, [value1, value2])\n```\n\n`useEffect` can also return a clean up function which can be used to clean up the values when the component unmounts\n\n```JSX\nuseEffect(() =\u003e {\n    //code to be executed whenever the component rerenders because value1 changed\n\n    return () =\u003e {\n        // code to clean up values after component unmounts\n    }\n}, [value])\n```\n\n## useRef\n\n`useRef` hook allows to persist values between renders. Can store a mutable value that does not cause a re-render when updated. It can access the DOM directly and can be used to store a reference to a DOM node.\n\n### Syntax Examples\n\n```TSX\nconst ref = useRef(1) // initial value is a number\nconst reference = useRef('name') // initial value is a string\nconst inputRef = useRef\u003cHTMLInputElement\u003e(null) // initial value is null\n```\n\n### A use case\n\nAnother use case is solving an issue of updating state when component has unmounted. With `useRef`, you can check if the component is still there and then execute the state update.\n\n```JSX\nconst isCurrent = useRef(true)\n\nuseEffect(() =\u003e {\n    return () =\u003e isCurrent.current = false\n}, [])\n\nif(isCurrent.current){\n    //logic for setting state goes here\n}\n```\n\n## useLayoutEffect\n\nThis runs synchronously immediately after React has performed all DOM mutations. This can be useful if you need to make DOM measurements (like getting the scroll position or other styles for an element) and then make DOM mutations or trigger a synchronous re-render by updating state.\n\nYour code runs immediately after the DOM has been updated, but before the browser has had a chance to \"paint\" those changes (the user doesn't actually see the updates until after the browser has repainted)\n\nIt's similar to useEffect where it can have a dependency array which can be empty to make the hook run only once or take a value or values which will cause the hook to run everytime they change. The hook can also not have a dependency array which will mean that it will get called whenever the component render.\n\n### Syntax Examples\n\n```JSX\nuseLayoutEffect(() =\u003e {}, [])\n```\n\n## useCallback\n\nA hook that lets you cache a function definition between re-renders.\n\n```JSX\nconst cachedFn = useCallback(fn, dependencies)\n```\n\n### Parameters\n\n`fn`: The function value that you want to cache. It can take any arguments and return any values. React will return (not call!) your function back to you during the initial render. On subsequent renders, React will give you the same function again if the `dependencies` have not changed since the last render. Otherwise, it will give you the function that you have passed during the current render, and store it in case it can be reused later. React will not call your function. The function is returned to you so you can decide when and whether to call it.\n\n`dependencies`: The list of all reactive values referenced inside of the `fn` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. The list of `dependencies` must have a constant number of items and be written inline like [dep1, dep2, dep3]. React will compare each dependency with its previous value using the `Object.is` comparison algorithm.\n\n## useMemo\n\nA hook that lets you cache the result of a calculation between re-renders.\n\n```JSX\nconst cachedFn = useMemo(calculateValue, dependencies)\n```\n\n### Parameters\n\ncalculateValue: The function calculating the value that you want to cache. It should be pure, should take no arguments, and should return a value of any type. React will call your function during the initial render. On subsequent renders, React will return the same value again if the dependencies have not changed since the last render. Otherwise, it will call calculateValue, return its result, and store it in case it can be reused later.\n\n## useReducer\n\nThe `useReducer` hook is used to store and update states, just like the `useState` hook. It accepts a `reducer` function as its first parameter and the initial state as the second. `useReducer` returns an array that holds the current state value and a `dispatch` function to which you can pass an action and later invoke it.\n\n## useContext\n\nlets you read and subscribe to context from your component. React Context is a method to pass props from parent to child component(s), by storing the props in a store and using these props from the store by child component(s) without actually passing them manually at each level of the component tree(prop drilling)\n\n```JSX\nconst value = useContext(SomeContext)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneicore%2Freact-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fneicore%2Freact-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneicore%2Freact-hooks/lists"}