├── .all-contributorsrc
├── .github
    └── FUNDING.yml
├── LICENSE
├── README.md
├── chart.drawio
├── index.html
└── screenshot.jpg


/.all-contributorsrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files": [
 3 |     "README.md"
 4 |   ],
 5 |   "imageSize": 100,
 6 |   "commit": false,
 7 |   "contributors": [
 8 |     {
 9 |       "login": "Wavez",
10 |       "name": "Gal Margalit",
11 |       "avatar_url": "https://avatars.githubusercontent.com/u/2171199?v=4",
12 |       "profile": "https://github.com/Wavez",
13 |       "contributions": [
14 |         "code",
15 |         "doc",
16 |         "content",
17 |         "maintenance",
18 |         "design",
19 |         "blog",
20 |         "projectManagement",
21 |         "review"
22 |       ]
23 |     },
24 |     {
25 |       "login": "albseb511",
26 |       "name": "Albert Sebastian",
27 |       "avatar_url": "https://avatars.githubusercontent.com/u/12158859?v=4",
28 |       "profile": "https://www.linkedin.com/in/albseb/",
29 |       "contributions": [
30 |         "ideas",
31 |         "bug",
32 |         "question",
33 |         "example"
34 |       ]
35 |     },
36 |     {
37 |       "login": "eladcandroid",
38 |       "name": "Elad Cohen",
39 |       "avatar_url": "https://avatars.githubusercontent.com/u/13297000?v=4",
40 |       "profile": "https://github.com/eladcandroid",
41 |       "contributions": [
42 |         "bug"
43 |       ]
44 |     }
45 |   ],
46 |   "contributorsPerLine": 7,
47 |   "projectName": "react-hooks-lifecycle",
48 |   "projectOwner": "Wavez",
49 |   "repoType": "github",
50 |   "repoHost": "https://github.com",
51 |   "skipCi": true
52 | }
53 | 


--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | 
2 | github: Wavez
3 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Gal Margalit
 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 | ![Maintenance](https://img.shields.io/maintenance/yes/2022)
 2 | [![react versions supported](https://img.shields.io/badge/React%20versions%3A-Latest-success "React versions supported")]()
 3 | [![GitHub stars](https://img.shields.io/github/stars/Wavez/react-hooks-lifecycle)](https://github.com/Wavez/react-hooks-lifecycle/stargazers)
 4 | [![Twitter Follow](https://img.shields.io/twitter/follow/MargalitGal?label=Follow%20@MargalitGal&style=social)](https://twitter.com/MargalitGal)
 5 | 
 6 | # React Hooks Lifecycle Diagram ⚛️ 🪝 ⏳ #
 7 | [View the interactive diagram](https://wavez.github.io/react-hooks-lifecycle/)  
 8 |   
 9 | <a href="https://wavez.github.io/react-hooks-lifecycle">
10 |   <img src="https://raw.githubusercontent.com/Wavez/react-hooks-lifecycle/master/screenshot.jpg" />
11 | </a>
12 | 
13 | ## 💡 Functional components lifecycle explained ##
14 | 
15 | This diagram is made using [draw.io](https://draw.io)
16 | and will be updated when react will introduce new hooks.  
17 | 
18 | This diagram was inspired by [Dan Abramov's tweet](https://twitter.com/dan_abramov/status/981712092611989509) (and its latter react [implementation](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)) of the now "old" 👴 Class Components lifecycle.
19 | 
20 | ##  📖  Further reading
21 | - [React hooks flow](https://github.com/donavon/hook-flow)
22 | - [React hooks API](https://reactjs.org/docs/hooks-reference.html)
23 | - [About this repo](https://medium.com/@galmargalit/react-function-components-hooks-lifecycle-diagram-14f76e0a5988)  
24 | 
25 | 
26 | ## 🤗  Contributors
27 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification and its [emoji legend](https://allcontributors.org/docs/en/emoji-key).  
28 | Contributions of any kind are welcome!
29 | Thanks goes to these wonderful people:
30 | 
31 | <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
32 | <!-- prettier-ignore-start -->
33 | <!-- markdownlint-disable -->
34 | <table>
35 |   <tr>
36 |     <td align="center"><a href="https://github.com/Wavez"><img src="https://avatars.githubusercontent.com/u/2171199?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Gal Margalit</b></sub></a><br /><a href="https://github.com/Wavez/react-hooks-lifecycle/commits?author=Wavez" title="Code">💻</a> <a href="https://github.com/Wavez/react-hooks-lifecycle/commits?author=Wavez" title="Documentation">📖</a> <a href="#content-Wavez" title="Content">🖋</a> <a href="#maintenance-Wavez" title="Maintenance">🚧</a> <a href="#design-Wavez" title="Design">🎨</a> <a href="#blog-Wavez" title="Blogposts">📝</a> <a href="#projectManagement-Wavez" title="Project Management">📆</a> <a href="https://github.com/Wavez/react-hooks-lifecycle/pulls?q=is%3Apr+reviewed-by%3AWavez" title="Reviewed Pull Requests">👀</a></td>
37 |     <td align="center"><a href="https://www.linkedin.com/in/albseb/"><img src="https://avatars.githubusercontent.com/u/12158859?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Albert Sebastian</b></sub></a><br /><a href="#ideas-albseb511" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/Wavez/react-hooks-lifecycle/issues?q=author%3Aalbseb511" title="Bug reports">🐛</a> <a href="#question-albseb511" title="Answering Questions">💬</a> <a href="#example-albseb511" title="Examples">💡</a></td>
38 |     <td align="center"><a href="https://github.com/eladcandroid"><img src="https://avatars.githubusercontent.com/u/13297000?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Elad Cohen</b></sub></a><br /><a href="https://github.com/Wavez/react-hooks-lifecycle/issues?q=author%3Aeladcandroid" title="Bug reports">🐛</a></td>
39 |   </tr>
40 | </table>
41 | 
42 | 
43 | <!-- markdownlint-restore -->
44 | <!-- prettier-ignore-end -->
45 | 
46 | <!-- ALL-CONTRIBUTORS-LIST:END -->
47 | 
48 | 
49 | 


--------------------------------------------------------------------------------
/chart.drawio:
--------------------------------------------------------------------------------
  1 | <mxfile host="app.diagrams.net" modified="2022-02-25T15:07:55.924Z" agent="5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.109 Safari/537.36" etag="-cfSzGftLrrG70KvJqDV" version="16.6.4" type="github">
  2 |   <diagram id="4Y_KsI118iPX1C1HI_qV" name="Page-1">
  3 |     <mxGraphModel dx="1687" dy="897" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1100" pageHeight="850" math="0" shadow="0">
  4 |       <root>
  5 |         <mxCell id="0" />
  6 |         <mxCell id="1" parent="0" />
  7 |         <mxCell id="peq8d5gX8DXLt__JmTx_-2" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#B3B3B3;fontColor=#333333;" parent="1" vertex="1">
  8 |           <mxGeometry x="210" y="131" width="192" height="269" as="geometry" />
  9 |         </mxCell>
 10 |         <mxCell id="peq8d5gX8DXLt__JmTx_-3" value="&lt;font style=&quot;font-size: 18px&quot; face=&quot;Verdana&quot;&gt;Mounting&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
 11 |           <mxGeometry x="282" y="141" width="38" height="20" as="geometry" />
 12 |         </mxCell>
 13 |         <mxCell id="peq8d5gX8DXLt__JmTx_-4" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" parent="1" edge="1">
 14 |           <mxGeometry relative="1" as="geometry">
 15 |             <Array as="points">
 16 |               <mxPoint x="272" y="301" />
 17 |               <mxPoint x="272" y="301" />
 18 |             </Array>
 19 |             <mxPoint x="272" y="208" as="sourcePoint" />
 20 |             <mxPoint x="272" y="321" as="targetPoint" />
 21 |           </mxGeometry>
 22 |         </mxCell>
 23 |         <mxCell id="peq8d5gX8DXLt__JmTx_-5" value="&lt;h3 id=&quot;static-getderivedstatefromprops&quot;&gt;&lt;code style=&quot;font-weight: normal&quot;&gt;&lt;font style=&quot;font-size: 14px&quot;&gt;function () {}&lt;/font&gt;&lt;/code&gt;&lt;/h3&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;gradientColor=#E8F1FF;" parent="1" vertex="1">
 24 |           <mxGeometry x="242" y="178" width="140" height="30" as="geometry" />
 25 |         </mxCell>
 26 |         <mxCell id="peq8d5gX8DXLt__JmTx_-7" value="&lt;font style=&quot;font-size: 13px&quot; face=&quot;Verdana&quot;&gt;&lt;b&gt;&quot;Render phase&quot;&lt;br&gt;&lt;/b&gt;&lt;/font&gt;&lt;br&gt;Pure and has no side&lt;br&gt;effects. May be paused,&lt;br&gt;aborted or restarted by&lt;br&gt;React." style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;" parent="1" vertex="1">
 27 |           <mxGeometry x="40" y="191" width="140" height="90" as="geometry" />
 28 |         </mxCell>
 29 |         <mxCell id="peq8d5gX8DXLt__JmTx_-8" value="&lt;font style=&quot;font-size: 14px&quot;&gt;&lt;b&gt;&quot;Commit phase&quot;&lt;br&gt;&lt;/b&gt;&lt;br&gt;&lt;/font&gt;Can work with DOM,&lt;br&gt;run side effects,&lt;br&gt;schedule updates.&lt;br&gt;" style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;" parent="1" vertex="1">
 30 |           <mxGeometry x="40" y="471" width="130" height="70" as="geometry" />
 31 |         </mxCell>
 32 |         <mxCell id="peq8d5gX8DXLt__JmTx_-12" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#B3B3B3;fontColor=#333333;" parent="1" vertex="1">
 33 |           <mxGeometry x="450" y="131" width="452" height="269" as="geometry" />
 34 |         </mxCell>
 35 |         <mxCell id="peq8d5gX8DXLt__JmTx_-13" value="&lt;font style=&quot;font-size: 18px&quot; face=&quot;Verdana&quot;&gt;Updating&lt;/font&gt;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
 36 |           <mxGeometry x="632.0037624861264" y="141" width="75.91564927857935" height="20" as="geometry" />
 37 |         </mxCell>
 38 |         <UserObject label="New props" id="peq8d5gX8DXLt__JmTx_-15">
 39 |           <mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;gradientColor=#E8F1FF;" parent="1" vertex="1">
 40 |             <mxGeometry x="468" y="179" width="92" height="30" as="geometry" />
 41 |           </mxCell>
 42 |         </UserObject>
 43 |         <mxCell id="peq8d5gX8DXLt__JmTx_-16" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#B3B3B3;" parent="1" vertex="1">
 44 |           <mxGeometry x="210" y="430" width="692" height="320" as="geometry" />
 45 |         </mxCell>
 46 |         <mxCell id="peq8d5gX8DXLt__JmTx_-17" value="&lt;h3 id=&quot;static-getderivedstatefromprops&quot;&gt;&lt;code&gt;&lt;font style=&quot;font-weight: normal ; font-size: 14px&quot;&gt;return ()&lt;/font&gt;&lt;/code&gt;&lt;/h3&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#E8F1FF;strokeColor=#6c8ebf;" parent="1" vertex="1">
 47 |           <mxGeometry x="242" y="321" width="140" height="30" as="geometry" />
 48 |         </mxCell>
 49 |         <mxCell id="bXESYanQTJGo6Cj8_ghC-12" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontFamily=Helvetica;fontSize=12;" parent="1" source="peq8d5gX8DXLt__JmTx_-18" target="bXESYanQTJGo6Cj8_ghC-10" edge="1">
 50 |           <mxGeometry relative="1" as="geometry" />
 51 |         </mxCell>
 52 |         <mxCell id="peq8d5gX8DXLt__JmTx_-18" value="" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;gradientColor=#C8E8C5;" parent="1" vertex="1">
 53 |           <mxGeometry x="242" y="553" width="630" height="50" as="geometry" />
 54 |         </mxCell>
 55 |         <UserObject label="&lt;h3 id=&quot;static-getderivedstatefromprops&quot;&gt;&lt;code&gt;&lt;font style=&quot;font-size: 14px&quot;&gt;&lt;a href=&quot;https://reactjs.org/docs/hooks-reference.html#usememo&quot;&gt;useMemo()&lt;/a&gt;&lt;/font&gt;&lt;/code&gt;&lt;/h3&gt;" tooltip="https://reactjs.org/docs/hooks-reference.html#usememo" id="peq8d5gX8DXLt__JmTx_-26">
 56 |           <mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;dashed=1;gradientColor=#E8F1FF;" parent="1" vertex="1">
 57 |             <mxGeometry x="292" y="236" width="90" height="30" as="geometry" />
 58 |           </mxCell>
 59 |         </UserObject>
 60 |         <mxCell id="peq8d5gX8DXLt__JmTx_-31" value="&lt;h3 id=&quot;static-getderivedstatefromprops&quot;&gt;&lt;code style=&quot;font-weight: normal&quot;&gt;React updates DOM and refs&lt;/code&gt;&lt;/h3&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;gradientColor=#FFF1B8;" parent="1" vertex="1">
 61 |           <mxGeometry x="240" y="461" width="632" height="50" as="geometry" />
 62 |         </mxCell>
 63 |         <mxCell id="yjP6mhXBnPZrxiyDEznI-19" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;fontColor=#007FFF;" parent="1" source="peq8d5gX8DXLt__JmTx_-32" edge="1">
 64 |           <mxGeometry relative="1" as="geometry">
 65 |             <mxPoint x="671" y="350" as="targetPoint" />
 66 |             <Array as="points">
 67 |               <mxPoint x="770" y="330" />
 68 |               <mxPoint x="671" y="330" />
 69 |             </Array>
 70 |           </mxGeometry>
 71 |         </mxCell>
 72 |         <UserObject label="&lt;h3 id=&quot;static-getderivedstatefromprops&quot;&gt;&lt;code&gt;&lt;font style=&quot;font-size: 14px&quot;&gt;&lt;a href=&quot;https://reactjs.org/docs/hooks-reference.html#usecallback&quot;&gt;useCallback()&lt;/a&gt;&lt;/font&gt;&lt;/code&gt;&lt;/h3&gt;" tooltip="https://reactjs.org/docs/hooks-reference.html#usecallback" id="peq8d5gX8DXLt__JmTx_-32">
 73 |           <mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;dashed=1;gradientColor=#E8F1FF;" parent="1" vertex="1">
 74 |             <mxGeometry x="707.92" y="266" width="124" height="30" as="geometry" />
 75 |           </mxCell>
 76 |         </UserObject>
 77 |         <mxCell id="peq8d5gX8DXLt__JmTx_-33" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;" parent="1" edge="1">
 78 |           <mxGeometry relative="1" as="geometry">
 79 |             <mxPoint x="339" y="209" as="sourcePoint" />
 80 |             <mxPoint x="339" y="236" as="targetPoint" />
 81 |           </mxGeometry>
 82 |         </mxCell>
 83 |         <mxCell id="peq8d5gX8DXLt__JmTx_-34" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;" parent="1" edge="1">
 84 |           <mxGeometry relative="1" as="geometry">
 85 |             <mxPoint x="341" y="265" as="sourcePoint" />
 86 |             <mxPoint x="341" y="321" as="targetPoint" />
 87 |           </mxGeometry>
 88 |         </mxCell>
 89 |         <UserObject label="&lt;h3 id=&quot;static-getderivedstatefromprops&quot;&gt;&lt;code style=&quot;font-size: 14px&quot;&gt;&lt;font style=&quot;font-size: 14px&quot;&gt;&lt;a href=&quot;https://reactjs.org/docs/hooks-reference.html#useeffect&quot;&gt;useEffect()&lt;/a&gt;&amp;nbsp;&lt;/font&gt;&lt;/code&gt;&lt;/h3&gt;" tooltip="https://reactjs.org/docs/hooks-reference.html#useeffect" id="peq8d5gX8DXLt__JmTx_-42">
 90 |           <mxCell style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
 91 |             <mxGeometry x="299" y="567" width="40" height="20" as="geometry" />
 92 |           </mxCell>
 93 |         </UserObject>
 94 |         <UserObject label="&lt;h3 id=&quot;static-getderivedstatefromprops&quot;&gt;&lt;code style=&quot;font-size: 14px&quot;&gt;&lt;a href=&quot;https://reactjs.org/docs/hooks-reference.html#useeffect&quot;&gt;useLayoutEffect()&lt;/a&gt;&amp;nbsp;&lt;/code&gt;&lt;/h3&gt;&lt;h3 id=&quot;static-getderivedstatefromprops&quot;&gt;&lt;code&gt;&lt;font size=&quot;1&quot;&gt;&lt;a href=&quot;https://reactjs.org/docs/hooks-reference.html#uselayouteffect&quot;&gt;&lt;/a&gt;&lt;/font&gt;&lt;/code&gt;&lt;/h3&gt;" tooltip="https://reactjs.org/docs/hooks-reference.html#uselayouteffect" link="https://reactjs.org/docs/hooks-reference.html#uselayouteffect" linkTarget="_blank" id="peq8d5gX8DXLt__JmTx_-43">
 95 |           <mxCell style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="1" vertex="1">
 96 |             <mxGeometry x="435" y="567" width="40" height="20" as="geometry" />
 97 |           </mxCell>
 98 |         </UserObject>
 99 |         <mxCell id="yjP6mhXBnPZrxiyDEznI-13" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.68;entryY=-0.02;entryDx=0;entryDy=0;entryPerimeter=0;fontColor=#007FFF;" parent="1" source="yjP6mhXBnPZrxiyDEznI-10" target="peq8d5gX8DXLt__JmTx_-31" edge="1">
100 |           <mxGeometry relative="1" as="geometry" />
101 |         </mxCell>
102 |         <mxCell id="yjP6mhXBnPZrxiyDEznI-10" value="" style="rhombus;whiteSpace=wrap;html=1;labelBackgroundColor=none;fontColor=#007FFF;fillColor=none;aspect=fixed;" parent="1" vertex="1">
103 |           <mxGeometry x="660" y="210" width="20" height="20" as="geometry" />
104 |         </mxCell>
105 |         <mxCell id="Qn97D7aN3kyVjcPedb_y-5" value="" style="group;spacing=2;" parent="1" vertex="1" connectable="0">
106 |           <mxGeometry x="534" y="179" width="404" height="30" as="geometry" />
107 |         </mxCell>
108 |         <UserObject label="" id="Qn97D7aN3kyVjcPedb_y-1">
109 |           <mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;gradientColor=#E8F1FF;" parent="Qn97D7aN3kyVjcPedb_y-5" vertex="1">
110 |             <mxGeometry x="20" width="332" height="30" as="geometry" />
111 |           </mxCell>
112 |         </UserObject>
113 |         <UserObject label="&lt;h3 id=&quot;static-getderivedstatefromprops&quot;&gt;&lt;code&gt;&lt;font color=&quot;#3399ff&quot; style=&quot;font-size: 14px&quot;&gt;&lt;a href=&quot;https://reactjs.org/docs/hooks-reference.html#usestate&quot;&gt;useState()&lt;/a&gt;&lt;/font&gt;&lt;/code&gt;&lt;/h3&gt;" tooltip="https://reactjs.org/docs/hooks-reference.html#usestate" id="peq8d5gX8DXLt__JmTx_-39">
114 |           <mxCell style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="Qn97D7aN3kyVjcPedb_y-5" vertex="1">
115 |             <mxGeometry x="58" y="5" width="40" height="20" as="geometry" />
116 |           </mxCell>
117 |         </UserObject>
118 |         <UserObject label="&lt;h3 id=&quot;static-getderivedstatefromprops&quot;&gt;&lt;code&gt;&lt;font color=&quot;#3399ff&quot; style=&quot;font-size: 14px&quot;&gt;&lt;a href=&quot;https://reactjs.org/docs/hooks-reference.html#usereducer&quot;&gt;useReducer()&lt;/a&gt;&lt;/font&gt;&lt;/code&gt;&lt;/h3&gt;" tooltip="https://reactjs.org/docs/hooks-reference.html#usereducer" id="peq8d5gX8DXLt__JmTx_-40">
119 |           <mxCell style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="Qn97D7aN3kyVjcPedb_y-5" vertex="1">
120 |             <mxGeometry x="162" y="5" width="40" height="20" as="geometry" />
121 |           </mxCell>
122 |         </UserObject>
123 |         <UserObject label="&lt;h3 id=&quot;static-getderivedstatefromprops&quot;&gt;&lt;code&gt;&lt;font color=&quot;#3399ff&quot; style=&quot;font-size: 14px&quot;&gt;&lt;a href=&quot;https://reactjs.org/docs/hooks-reference.html#usecontext&quot; style=&quot;line-height: 1&quot;&gt;useContext()&lt;/a&gt;&lt;/font&gt;&lt;/code&gt;&lt;/h3&gt;" tooltip="https://reactjs.org/docs/hooks-reference.html#usecontext" id="peq8d5gX8DXLt__JmTx_-41">
124 |           <mxCell style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" parent="Qn97D7aN3kyVjcPedb_y-5" vertex="1">
125 |             <mxGeometry x="275.5" y="5" width="40" height="20" as="geometry" />
126 |           </mxCell>
127 |         </UserObject>
128 |         <mxCell id="Qn97D7aN3kyVjcPedb_y-7" value="&lt;h3 id=&quot;static-getderivedstatefromprops&quot; style=&quot;color: rgb(0 , 0 , 0) ; letter-spacing: normal ; text-indent: 0px ; text-transform: none ; word-spacing: 0px&quot;&gt;&lt;span style=&quot;font-weight: 400&quot;&gt;&lt;font style=&quot;font-size: 12px&quot;&gt;&lt;i&gt;These hooks support cleanup (inside their return function)&lt;/i&gt;&lt;/font&gt;&lt;/span&gt;&lt;/h3&gt;" style="text;whiteSpace=wrap;html=1;fillColor=none;align=left;" parent="1" vertex="1">
129 |           <mxGeometry x="582" y="541" width="160" height="60" as="geometry" />
130 |         </mxCell>
131 |         <mxCell id="bXESYanQTJGo6Cj8_ghC-6" value="&lt;font style=&quot;font-size: 13px&quot; face=&quot;Verdana&quot;&gt;&lt;b&gt;&quot;Cleanup phase&quot;&lt;br&gt;&lt;/b&gt;&lt;/font&gt;&lt;br&gt;Runs before a&lt;br&gt;component is removed.&lt;br&gt;Prevents memory leaks." style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;" parent="1" vertex="1">
132 |           <mxGeometry x="42" y="640" width="139" height="71" as="geometry" />
133 |         </mxCell>
134 |         <mxCell id="bXESYanQTJGo6Cj8_ghC-17" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;fontFamily=Helvetica;fontSize=12;" parent="1" source="bXESYanQTJGo6Cj8_ghC-10" target="peq8d5gX8DXLt__JmTx_-18" edge="1">
135 |           <mxGeometry relative="1" as="geometry" />
136 |         </mxCell>
137 |         <mxCell id="bXESYanQTJGo6Cj8_ghC-10" value="&lt;h3 id=&quot;static-getderivedstatefromprops&quot;&gt;&lt;code style=&quot;font-weight: normal&quot;&gt;React cleans up effects&lt;/code&gt;&lt;/h3&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" parent="1" vertex="1">
138 |           <mxGeometry x="241" y="670" width="631" height="50" as="geometry" />
139 |         </mxCell>
140 |         <mxCell id="bXESYanQTJGo6Cj8_ghC-15" value="" style="endArrow=classic;html=1;strokeColor=#000000;entryX=0.377;entryY=-0.02;entryDx=0;entryDy=0;entryPerimeter=0;" parent="1" edge="1">
141 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
142 |             <mxPoint x="557.29" y="511" as="sourcePoint" />
143 |             <mxPoint x="557.29" y="552" as="targetPoint" />
144 |           </mxGeometry>
145 |         </mxCell>
146 |         <mxCell id="peq8d5gX8DXLt__JmTx_-11" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" parent="1" source="peq8d5gX8DXLt__JmTx_-17" edge="1">
147 |           <mxGeometry relative="1" as="geometry">
148 |             <Array as="points">
149 |               <mxPoint x="310" y="401" />
150 |               <mxPoint x="310" y="401" />
151 |             </Array>
152 |             <mxPoint x="310" y="461" as="targetPoint" />
153 |           </mxGeometry>
154 |         </mxCell>
155 |         <mxCell id="peq8d5gX8DXLt__JmTx_-25" value="" style="endArrow=none;dashed=1;html=1;fontFamily=Lucida Console;fontSize=12;fontColor=#000000;strokeColor=#B3B3B3;" parent="1" edge="1">
156 |           <mxGeometry width="50" height="50" relative="1" as="geometry">
157 |             <mxPoint x="212" y="770" as="sourcePoint" />
158 |             <mxPoint x="900" y="770" as="targetPoint" />
159 |           </mxGeometry>
160 |         </mxCell>
161 |         <mxCell id="bXESYanQTJGo6Cj8_ghC-23" value="&lt;h3 id=&quot;static-getderivedstatefromprops&quot; style=&quot;color: rgb(0 , 0 , 0) ; letter-spacing: normal ; text-indent: 0px ; text-transform: none ; word-spacing: 0px&quot;&gt;&lt;span style=&quot;font-size: 12px ; font-weight: 400&quot;&gt;&lt;i&gt;React will clean up&lt;br&gt;before the effects&#39; next run&lt;/i&gt;&lt;/span&gt;&lt;/h3&gt;" style="text;whiteSpace=wrap;html=1;fillColor=none;align=left;" parent="1" vertex="1">
162 |           <mxGeometry x="582" y="599" width="170" height="60" as="geometry" />
163 |         </mxCell>
164 |         <mxCell id="bXESYanQTJGo6Cj8_ghC-22" value="" style="group" parent="1" vertex="1" connectable="0">
165 |           <mxGeometry x="210" y="785.2" width="237.5" height="27" as="geometry" />
166 |         </mxCell>
167 |         <mxCell id="peq8d5gX8DXLt__JmTx_-24" value="&lt;a href=&quot;https://github.com/Wavez/react-hooks-lifecycle&quot; style=&quot;font-size: 12px&quot;&gt;&lt;font color=&quot;#007fff&quot; style=&quot;font-size: 12px&quot; face=&quot;Lucida Console&quot;&gt;Wavez/react-hooks-lifecycle&lt;/font&gt;&lt;/a&gt;" style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;fontSize=12;fontColor=#000000;" parent="bXESYanQTJGo6Cj8_ghC-22" vertex="1">
168 |           <mxGeometry x="32.5" y="5" width="205" height="15" as="geometry" />
169 |         </mxCell>
170 |         <mxCell id="peq8d5gX8DXLt__JmTx_-23" value="" style="shape=image;imageAspect=0;aspect=fixed;verticalLabelPosition=bottom;verticalAlign=top;gradientColor=#ffffff;fontSize=18;fontColor=#000000;image=data:image/svg+xml,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDMyLjYgMzEuOCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzIuNiAzMS44OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+JiN4YTs8c3R5bGUgdHlwZT0idGV4dC9jc3MiPiYjeGE7CS5zdDB7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojMTgxNjE2O30mI3hhOzwvc3R5bGU+JiN4YTs8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTYuMywwQzcuMywwLDAsNy4zLDAsMTYuM2MwLDcuMiw0LjcsMTMuMywxMS4xLDE1LjVjMC44LDAuMSwxLjEtMC40LDEuMS0wLjhjMC0wLjQsMC0xLjQsMC0yLjggIGMtNC41LDEtNS41LTIuMi01LjUtMi4yYy0wLjctMS45LTEuOC0yLjQtMS44LTIuNGMtMS41LTEsMC4xLTEsMC4xLTFjMS42LDAuMSwyLjUsMS43LDIuNSwxLjdjMS41LDIuNSwzLjgsMS44LDQuNywxLjQgIGMwLjEtMS4xLDAuNi0xLjgsMS0yLjJjLTMuNi0wLjQtNy40LTEuOC03LjQtOC4xYzAtMS44LDAuNi0zLjIsMS43LTQuNEM3LjQsMTAuNyw2LjgsOSw3LjcsNi44YzAsMCwxLjQtMC40LDQuNSwxLjcgIGMxLjMtMC40LDIuNy0wLjUsNC4xLTAuNWMxLjQsMCwyLjgsMC4yLDQuMSwwLjVjMy4xLTIuMSw0LjUtMS43LDQuNS0xLjdjMC45LDIuMiwwLjMsMy45LDAuMiw0LjNjMSwxLjEsMS43LDIuNiwxLjcsNC40ICBjMCw2LjMtMy44LDcuNi03LjQsOGMwLjYsMC41LDEuMSwxLjUsMS4xLDNjMCwyLjIsMCwzLjksMCw0LjVjMCwwLjQsMC4zLDAuOSwxLjEsMC44YzYuNS0yLjIsMTEuMS04LjMsMTEuMS0xNS41ICBDMzIuNiw3LjMsMjUuMywwLDE2LjMsMHoiLz4mI3hhOzwvc3ZnPg==;" parent="bXESYanQTJGo6Cj8_ghC-22" vertex="1">
171 |           <mxGeometry width="27.675" height="27" as="geometry" />
172 |         </mxCell>
173 |         <mxCell id="AQQmuxFUS888oZAzTY0o-6" value="" style="shape=image;imageAspect=0;aspect=fixed;verticalLabelPosition=bottom;verticalAlign=top;image=https://www.svgrepo.com/show/167751/refresh.svg;" parent="1" vertex="1">
174 |           <mxGeometry x="547" y="626" width="20" height="20" as="geometry" />
175 |         </mxCell>
176 |         <mxCell id="peq8d5gX8DXLt__JmTx_-9" value="&lt;font style=&quot;font-size: 26px&quot; color=&quot;#232f3e&quot;&gt;React Hooks Lifecycle&lt;/font&gt;" style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;fontFamily=Verdana;fontStyle=1" parent="1" vertex="1">
177 |           <mxGeometry x="294" y="52" width="330" height="20" as="geometry" />
178 |         </mxCell>
179 |         <mxCell id="dHOrFxX_HmPoJwZjWr78-1" value="" style="group" parent="1" vertex="1" connectable="0">
180 |           <mxGeometry x="218" y="34" width="62" height="59" as="geometry" />
181 |         </mxCell>
182 |         <mxCell id="peq8d5gX8DXLt__JmTx_-19" value="" style="shape=image;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;imageAspect=0;image=https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg;" parent="dHOrFxX_HmPoJwZjWr78-1" vertex="1">
183 |           <mxGeometry x="12" y="12" width="50" height="47" as="geometry" />
184 |         </mxCell>
185 |         <mxCell id="uvFVxUhtjcqsa5vKmOB1-4" value="" style="shape=image;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;aspect=fixed;imageAspect=0;image=data:image/svg+xml,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDE0MC43IDMzNC42IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxNDAuNyAzMzQuNjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPiYjeGE7PHN0eWxlIHR5cGU9InRleHQvY3NzIj4mI3hhOwkuc3Qwe2ZpbGw6IzZFQ0ZGMDt9JiN4YTs8L3N0eWxlPiYjeGE7PGc+JiN4YTsJPGc+JiN4YTsJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zLjUsNTAuM2wzMS42LDYuMWMxLjMsMC4zLDIuNy0wLjYsMi45LTJsMC4zLTEuN2MwLjMtMS4zLTAuNi0yLjctMi0yLjlMNC44LDQzLjdjLTEuMy0wLjMtMi43LDAuNi0yLjksMiAgICBsLTAuMywxLjdDMS4zLDQ4LjcsMi4xLDUwLDMuNSw1MC4zeiIvPiYjeGE7CTwvZz4mI3hhOwk8Zz4mI3hhOwkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTMuNSw2Mi44bDMxLjYsNi4xYzEuMywwLjMsMi43LTAuNiwyLjktMmwwLjMtMS43YzAuMy0xLjMtMC42LTIuNy0yLTIuOUw0LjgsNTYuMmMtMS4zLTAuMy0yLjcsMC42LTIuOSwyICAgIGwtMC4zLDEuN0MxLjMsNjEuMiwyLjEsNjIuNSwzLjUsNjIuOHoiLz4mI3hhOwk8L2c+JiN4YTsJPGc+JiN4YTsJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zLjUsNzUuM2wzMS42LDYuMWMxLjMsMC4zLDIuNy0wLjYsMi45LTJsMC4zLTEuN2MwLjMtMS4zLTAuNi0yLjctMi0yLjlMNC44LDY4LjdjLTEuMy0wLjMtMi43LDAuNi0yLjksMiAgICBsLTAuMywxLjdDMS4zLDczLjcsMi4xLDc1LDMuNSw3NS4zeiIvPiYjeGE7CTwvZz4mI3hhOwk8Zz4mI3hhOwkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTMuNSw4Ny44bDMxLjYsNi4xYzEuMywwLjMsMi43LTAuNiwyLjktMmwwLjMtMS43YzAuMy0xLjMtMC42LTIuNy0yLTIuOUw0LjgsODEuMmMtMS4zLTAuMy0yLjcsMC42LTIuOSwyICAgIGwtMC4zLDEuN0MxLjMsODYuMiwyLjEsODcuNSwzLjUsODcuOHoiLz4mI3hhOwk8L2c+JiN4YTsJPGc+JiN4YTsJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0zLjUsMTAwLjNsMzEuNiw2LjFjMS4zLDAuMywyLjctMC42LDIuOS0ybDAuMy0xLjdjMC4zLTEuMy0wLjYtMi43LTItMi45TDQuOCw5My43Yy0xLjMtMC4zLTIuNywwLjYtMi45LDIgICAgbC0wLjMsMS43QzEuMyw5OC43LDIuMSwxMDAsMy41LDEwMC4zeiIvPiYjeGE7CTwvZz4mI3hhOwk8Zz4mI3hhOwkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTMuNSwxMTIuOGwzMS42LDYuMWMxLjMsMC4zLDIuNy0wLjYsMi45LTJsMC4zLTEuN2MwLjMtMS4zLTAuNi0yLjctMi0yLjlsLTMxLjYtNi4xYy0xLjMtMC4zLTIuNywwLjYtMi45LDIgICAgbC0wLjMsMS43QzEuMywxMTEuMiwyLjEsMTEyLjUsMy41LDExMi44eiIvPiYjeGE7CTwvZz4mI3hhOwk8Zz4mI3hhOwkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTMuNSwxMjUuM2wzMS42LDYuMWMxLjMsMC4zLDIuNy0wLjYsMi45LTJsMC4zLTEuN2MwLjMtMS4zLTAuNi0yLjctMi0yLjlsLTMxLjYtNi4xYy0xLjMtMC4zLTIuNywwLjYtMi45LDIgICAgbC0wLjMsMS43QzEuMywxMjMuNywyLjEsMTI1LDMuNSwxMjUuM3oiLz4mI3hhOwk8L2c+JiN4YTsJPGc+JiN4YTsJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNS40LDM5LjN2MTAuMmg5LjFWMzkuM2M4LjgtMi4xLDE1LjQtMTAsMTUuNC0xOS40QzM5LjgsOC45LDMwLjksMCwxOS45LDBDOC45LDAsMCw4LjksMCwxOS45ICAgIEMwLDI5LjQsNi42LDM3LjMsMTUuNCwzOS4zeiBNNCwxOS45QzQsMTEuMSwxMS4xLDQsMTkuOSw0YzguOCwwLDE1LjksNy4xLDE1LjksMTUuOWMwLDguOC03LjEsMTUuOS0xNS45LDE1LjkgICAgQzExLjEsMzUuOSw0LDI4LjcsNCwxOS45eiIvPiYjeGE7CTwvZz4mI3hhOwk8Zz4mI3hhOwkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTE1LjIsMTM1LjRWMTI1aDkuMXYxMC40YzAuMywwLjEsMC4zLTAuNCwwLjEtMC41bDAsMTExLjFjLTAuNSwxNS40LDQuNCwzMC4yLDEyLjQsNDMuM3MyMCwyMy44LDMzLjksMzAuMyAgICBjMTIuMSw1LjcsMjYuOCw4LDM4LjcsMmM5LjgtNSwxNi4zLTE1LDE5LjUtMjUuNWMzLjItMTAuNSwzLjUtMjEuNywzLjgtMzIuN2MtNS40LDUuNy0xMC4zLDExLTE1LjcsMTYuN2MwLjEtMC4zLDAuNC0wLjUsMC43LTAuNSAgICBjOC45LTE0LjksMTAuNy0zMy4xLDUuMS00OS41YzE2LjcsMTkuMiwyMi42LDQ2LjgsMTQsNzAuN2MtNS4yLDE0LjYtMTYuMSwyNy45LTMxLDMyLjNjLTEzLjgsNC4xLTI4LjktMC4xLTQxLjUtNy4xICAgIGMtMTguMi0xMC4xLTMzLTI2LjEtNDEuNi00NWMtOC43LTE4LjktNy02MC45LTctNjAuOUwxNS4yLDEzNS40eiIvPiYjeGE7CTwvZz4mI3hhOzwvZz4mI3hhOzwvc3ZnPg==;sketch=0;imageBorder=none;" parent="dHOrFxX_HmPoJwZjWr78-1" vertex="1">
186 |           <mxGeometry width="21" height="49" as="geometry" />
187 |         </mxCell>
188 |         <mxCell id="peq8d5gX8DXLt__JmTx_-22" value="&lt;font style=&quot;line-height: 170%&quot;&gt;Made with&lt;br&gt;&lt;/font&gt;" style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;fontSize=13;fontColor=#000000;fontFamily=Lucida Console;" parent="1" vertex="1">
189 |           <mxGeometry x="739" y="787" width="70" height="20" as="geometry" />
190 |         </mxCell>
191 |         <mxCell id="yjP6mhXBnPZrxiyDEznI-8" value="" style="aspect=fixed;html=1;points=[];align=center;image;fontSize=12;image=img/lib/azure2/general/Heart.svg;labelBackgroundColor=none;fillColor=none;" parent="1" vertex="1">
192 |           <mxGeometry x="801" y="794.56" width="14" height="13.13" as="geometry" />
193 |         </mxCell>
194 |         <UserObject label="&lt;font color=&quot;#007fff&quot; face=&quot;Lucida Console&quot;&gt;Gal Margalit&lt;/font&gt;" link="https://twitter.com/MargalitGal" linkTarget="_blank" id="yjP6mhXBnPZrxiyDEznI-31">
195 |           <mxCell style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;fontSize=12;fontColor=#000000;fontStyle=4" parent="1" vertex="1">
196 |             <mxGeometry x="836" y="791.12" width="80" height="20" as="geometry" />
197 |           </mxCell>
198 |         </UserObject>
199 |         <mxCell id="gwXCb_sFi5krlNEUbtP0-3" value="by" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
200 |           <mxGeometry x="820.92" y="796.12" width="10" height="10" as="geometry" />
201 |         </mxCell>
202 |       </root>
203 |     </mxGraphModel>
204 |   </diagram>
205 | </mxfile>
206 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <title>React hooks lifecycle diagram</title>
 6 |     <link href="https://www.draw.io" rel="preconnect" crossorigin/>
 7 |     <link href="https://raw.githubusercontent.com" rel="preconnect" crossorigin/>
 8 |     <link href="https://www.google-analytics.com" rel="preconnect" crossorigin/>
 9 |     <link href="https://www.googletagmanager.com" rel="preconnect" crossorigin/>
10 |     <script defer
11 |             src="https://www.draw.io/embed2.js?&fetch=https://raw.githubusercontent.com/Wavez/react-hooks-lifecycle/master/chart.drawio"></script>
12 |     <!-- Global site tag (gtag.js) - Google Analytics -->
13 |     <script defer src="https://www.googletagmanager.com/gtag/js?id=UA-66100628-2"></script>
14 |     <script>
15 |         window.dataLayer = window.dataLayer || [];
16 | 
17 |         function gtag() {
18 |             dataLayer.push(arguments);
19 |         }
20 | 
21 |         gtag('js', new Date());
22 |         gtag('config', 'UA-66100628-2');
23 |     </script>
24 | 
25 |     <meta charSet="UTF-8"/>
26 |     <meta name="viewport" content="width=device-width, initial-scale=1"/>
27 |     <meta name="description" content="React lifecycle Hooks diagram, Functional Components visualized"/>
28 |     <meta name="author" content="Gal Margalit"/>
29 |     <meta name="keywords"
30 |           content="react, hooks, reactjs, react hooks lifecycle, diagram, functional components, graph"/>
31 |     <style>
32 |         .geDiagramContainer {
33 |             margin: 1rem auto;
34 |         }
35 | 
36 |         a,
37 |         a:visited {
38 |             color: rgb(0, 70, 255);
39 |         }
40 | 
41 |         a font:hover,
42 |         a:hover {
43 |             color: blue;
44 |             font-size: 1.05em;
45 |         }
46 |     </style>
47 | </head>
48 | 
49 | <body>
50 | <div class="mxgraph"
51 |      data-mxgraph="{&quot;highlight&quot;:&quot;#0000ff&quot;,&quot;nav&quot;:true,&quot;resize&quot;:true,&quot;toolbar&quot;:&quot;zoom layers lightbox&quot;,&quot;edit&quot;:&quot;_blank&quot;,&quot;url&quot;:&quot;https://raw.githubusercontent.com/Wavez/react-hooks-lifecycle/master/chart.drawio&quot;}">
52 | </div>
53 | </body>
54 | 
55 | </html>


--------------------------------------------------------------------------------
/screenshot.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Wavez/react-hooks-lifecycle/e0d2d19142e74c9506f11aa55028f50b15a177d9/screenshot.jpg


--------------------------------------------------------------------------------