├── .all-contributorsrc ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── hook-flow.drawio ├── hook-flow.pdf ├── hook-flow.png ├── hook-flow.sh └── package.json /.all-contributorsrc: -------------------------------------------------------------------------------- 1 | { 2 | "projectName": "hook-flow", 3 | "projectOwner": "donavon", 4 | "repoType": "github", 5 | "repoHost": "https://github.com", 6 | "files": [ 7 | "README.md" 8 | ], 9 | "imageSize": 100, 10 | "commit": false, 11 | "contributors": [ 12 | { 13 | "login": "donavon", 14 | "name": "Donavon West", 15 | "avatar_url": "https://avatars3.githubusercontent.com/u/887639?v=4", 16 | "profile": "http://donavon.com", 17 | "contributions": [ 18 | "ideas", 19 | "infra", 20 | "maintenance", 21 | "review", 22 | "code", 23 | "design" 24 | ] 25 | }, 26 | { 27 | "login": "revelcw", 28 | "name": "Revel Carlberg West", 29 | "avatar_url": "https://avatars2.githubusercontent.com/u/29359616?v=4", 30 | "profile": "https://github.com/revelcw", 31 | "contributions": [ 32 | "ideas", 33 | "design" 34 | ] 35 | }, 36 | { 37 | "login": "gaearon", 38 | "name": "Dan Abramov", 39 | "avatar_url": "https://avatars0.githubusercontent.com/u/810438?v=4", 40 | "profile": "http://twitter.com/dan_abramov", 41 | "contributions": [ 42 | "ideas", 43 | "design" 44 | ] 45 | } 46 | ], 47 | "contributorsPerLine": 7 48 | } 49 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | hook-flow.drawio 2 | hook-flow.pdf 3 | hook-flow.png 4 | .all-contributorsrc 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Donavon West 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # hook-flow 2 | [![All Contributors](https://img.shields.io/badge/all_contributors-3-orange.svg?style=flat-square)](#contributors) 3 | 4 | React Hooks were introduced in version 16.8.0. They are a complete departure from class component lifecycle events. 5 | For more information, see the official React 6 | [Hooks API Reference](https://reactjs.org/docs/hooks-reference.html). 7 | 8 | Here is a flow diagram that explains the new flow of a Hooks component. 9 | 10 | ## Flow Diagram 11 | 12 | This flow diagram is also available as a [PDF file](https://github.com/donavon/hook-flow/blob/master/hook-flow.pdf). 13 | 14 |

15 | flow chart 16 |

17 | 18 | ## Open in browser 19 | 20 | To quickly open the Hook Flow Diagram in your default browser, you can execute the following 21 | from your terminal. Commit this to memory! 😉 22 | 23 | ```bash 24 | $ npx hook-flow 25 | ``` 26 | 27 | ## License 28 | 29 | **[MIT](LICENSE)** Licensed 30 | 31 | ## Contributors 32 | 33 | Thanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)): 34 | 35 | 36 | 37 | | [Donavon West
Donavon West](http://donavon.com)
[🤔](#ideas-donavon "Ideas, Planning, & Feedback") [🚇](#infra-donavon "Infrastructure (Hosting, Build-Tools, etc)") [🚧](#maintenance-donavon "Maintenance") [👀](#review-donavon "Reviewed Pull Requests") [💻](https://github.com/donavon/hook-flow/commits?author=donavon "Code") [🎨](#design-donavon "Design") | [Revel Carlberg West
Revel Carlberg West](https://github.com/revelcw)
[🤔](#ideas-revelcw "Ideas, Planning, & Feedback") [🎨](#design-revelcw "Design") | [Dan Abramov
Dan Abramov](http://twitter.com/dan_abramov)
[🤔](#ideas-gaearon "Ideas, Planning, & Feedback") [🎨](#design-gaearon "Design") | 38 | | :---: | :---: | :---: | 39 | 40 | 41 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome! 42 | -------------------------------------------------------------------------------- /hook-flow.drawio: -------------------------------------------------------------------------------- 1 | 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 -------------------------------------------------------------------------------- /hook-flow.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/donavon/hook-flow/92ac373ef707c9f63ab61f64fcfe9941e3f7c6d3/hook-flow.pdf -------------------------------------------------------------------------------- /hook-flow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/donavon/hook-flow/92ac373ef707c9f63ab61f64fcfe9941e3f7c6d3/hook-flow.png -------------------------------------------------------------------------------- /hook-flow.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | # hook-flow 3 | 4 | open https://github.com/donavon/hook-flow 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hook-flow", 3 | "version": "1.3.1", 4 | "description": "A flow diagram that explains the new flow of a Hooks component.", 5 | "author": "Donavon West (https://github.com/donavon)", 6 | "license": "MIT", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/donavon/hook-flow.git" 10 | }, 11 | "bin": { 12 | "hook-flow": "./hook-flow.sh" 13 | } 14 | } 15 | --------------------------------------------------------------------------------