{"id":13808926,"url":"https://github.com/Lemoncode/react-hooks-by-example","last_synced_at":"2025-05-14T03:31:45.336Z","repository":{"id":36677430,"uuid":"185043217","full_name":"Lemoncode/react-hooks-by-example","owner":"Lemoncode","description":"The goal of this project is to provide a set of react hooks step by step guided examples, coverting from starter scenarios to advanced topics.","archived":false,"fork":false,"pushed_at":"2022-03-05T09:58:17.000Z","size":1182,"stargazers_count":363,"open_issues_count":1,"forks_count":89,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-08-04T01:10:08.067Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/Lemoncode.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":"2019-05-05T14:38:45.000Z","updated_at":"2024-07-22T02:59:46.000Z","dependencies_parsed_at":"2022-08-08T16:31:10.074Z","dependency_job_id":null,"html_url":"https://github.com/Lemoncode/react-hooks-by-example","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/Lemoncode%2Freact-hooks-by-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lemoncode%2Freact-hooks-by-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lemoncode%2Freact-hooks-by-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lemoncode%2Freact-hooks-by-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lemoncode","download_url":"https://codeload.github.com/Lemoncode/react-hooks-by-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225273292,"owners_count":17448080,"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":[],"created_at":"2024-08-04T01:01:55.253Z","updated_at":"2024-11-19T00:31:12.907Z","avatar_url":"https://github.com/Lemoncode.png","language":"JavaScript","readme":"\n[\u003cimg align=\"left\" src=\"https://images.squarespace-cdn.com/content/v1/56cdb491a3360cdd18de5e16/1536155167931-3JJ7O74IM4QP88L0RQS9/3_200.png\" alt=\"español\" width=\"170\"/\u003e](https://lemoncode.net/) \n\n\n[\u003cimg align=\"right\" src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/Spain_flag_icon.svg/1200px-Spain_flag_icon.svg.png\" alt=\"english\" width=\"50\"/\u003e](https://github.com/Lemoncode/react-hooks-by-example/blob/master/Readme_es.md)\n[\u003cimg align=\"right\" src=\"https://assets.stickpng.com/images/580b585b2edbce24c47b2836.png\" alt=\"inglés\" width=\"47\"/\u003e](https://github.com/Lemoncode/react-hooks-by-example/blob/master/Readme.md)\n  \n\u003cbr\u003e\n\u003cbr\u003e\n\n\n# React Hooks By Example\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://tsh.io/wp-content/uploads/2020/10/react-hooks-best-practices-lead_.jpg\" alt=\"hooks\" width=\"300\"/\u003e\n\u003c/p\u003e\nSet of step by step guide examples covering React Hooks, from start to advanced cases.\n\nAbout this examples:\n\n- Each example is focused on a topic (simple and straightforward).\n- Each example contains a Readme.md with a step by step guide to reproduce it.\n\n# Examples implemented\n\nList of examples:\n\n- [00-boiler-plate](https://github.com/Lemoncode/react-hooks-by-example/tree/master/00-boilerplate): starting point, just a blank create-react-app project (all examples will take\n  this as starting point).\n- [01-use-state](https://github.com/Lemoncode/react-hooks-by-example/tree/master/01-use-state): adding state (simple element) to a functional component.\n- [02-use-state-object](https://github.com/Lemoncode/react-hooks-by-example/tree/master/02-use-state-object): adding state (object) to a functional component.\n- [03-component-did-mount](https://github.com/Lemoncode/react-hooks-by-example/tree/master/03-component-did-onload): executing some operations when a functional component gets mounted.\n- [04-component-unmount](https://github.com/Lemoncode/react-hooks-by-example/tree/master/04-component_unmount): executing cleanup code when a functional component gets unmounted.\n- [05-mount-did-update](https://github.com/Lemoncode/react-hooks-by-example/tree/master/05-component-update-render): hooking to mount and component update events.\n- [06-ajax-field-change](https://github.com/Lemoncode/react-hooks-by-example/tree/master/06-ajax-field-change): triggering an ajax call whenever a given field gets updated.\n- [07-custom-hooks](https://github.com/Lemoncode/react-hooks-by-example/tree/master/07-custom-hook): creating our custom hook, great to simplify components and get reusable assets.\n- [08-pure-component](https://github.com/Lemoncode/react-hooks-by-example/tree/master/08-pure-component): creating pure functional components.\n- [09-pure-component-callback](https://github.com/Lemoncode/react-hooks-by-example/tree/master/09-pure-component-callback): creating pure functional components, that include function properties\n  in their props.\n- [10-use-reducer](https://github.com/Lemoncode/react-hooks-by-example/tree/master/10-use-reducer): _useReducer_ effect, including dispatch.\n- [11-use-context](https://github.com/Lemoncode/react-hooks-by-example/tree/master/11-use-context): using the _useContext_ hook to get access to the context in one line of code.\n- [12-set-state-func](https://github.com/Lemoncode/react-hooks-by-example/tree/master/12-set-state-func): Whe calling _setState_ how to ensure we are\n  using the latest state value.\n- [13-async-closure](https://github.com/Lemoncode/react-hooks-by-example/tree/master/13-async-closure): advanced case, getting fresh data from _useState_ on callbacks.\n- [14-useref-dom](https://github.com/Lemoncode/react-hooks-by-example/tree/master/14-use-ref-dom): using _useRef_ hook to access a DOM element child.\n- [15-promise-unmounted](https://github.com/Lemoncode/react-hooks-by-example/tree/master/15-promise-unmounted): tracking when component is mounted/unmounted to avoid perform a state update on an unmounted component.\n- [16-memo-predicate](https://github.com/Lemoncode/react-hooks-by-example/tree/master/16-memo-predicate): enhancing rendering performance hooking to 'shouldComponentUpdate'.\n- [17-use-debug-value](https://github.com/Lemoncode/react-hooks-by-example/tree/master/17-use-debug-value): using built-in hook _useDebugValue_.\n- [18-why-did-you-update](https://github.com/Lemoncode/react-hooks-by-example/tree/master/18-why-did-you-update): implementing a custom hook to avoid unnecesary re-renders.\n\n# About Basefactor + Lemoncode\n\nWe are an innovating team of Javascript experts, passionate about turning your ideas into robust products.\n\n[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.\n\n[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.\n\nFor the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLemoncode%2Freact-hooks-by-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLemoncode%2Freact-hooks-by-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLemoncode%2Freact-hooks-by-example/lists"}