<mxfile host="Electron" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/29.3.6 Chrome/140.0.7339.249 Electron/38.8.0 Safari/537.36" version="29.3.6">
  <diagram id="4Y_KsI118iPX1C1HI_qV" name="Page-1">
    <mxGraphModel dx="2066" dy="1249" 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">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />
        <mxCell id="peq8d5gX8DXLt__JmTx_-2" parent="1" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#B3B3B3;fontColor=#333333;" value="" vertex="1">
          <mxGeometry height="269" width="192" x="210" y="131" as="geometry" />
        </mxCell>
        <mxCell id="peq8d5gX8DXLt__JmTx_-3" parent="1" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" value="&lt;font style=&quot;font-size: 18px&quot; face=&quot;Verdana&quot;&gt;Mounting&lt;/font&gt;" vertex="1">
          <mxGeometry height="20" width="38" x="282" y="141" as="geometry" />
        </mxCell>
        <mxCell id="peq8d5gX8DXLt__JmTx_-4" edge="1" parent="1" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" value="">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="272" y="301" />
              <mxPoint x="272" y="301" />
            </Array>
            <mxPoint x="272" y="208" as="sourcePoint" />
            <mxPoint x="272" y="321" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="peq8d5gX8DXLt__JmTx_-5" parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;gradientColor=#E8F1FF;" 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;" vertex="1">
          <mxGeometry height="30" width="140" x="242" y="178" as="geometry" />
        </mxCell>
        <mxCell id="peq8d5gX8DXLt__JmTx_-7" parent="1" style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;" 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." vertex="1">
          <mxGeometry height="90" width="140" x="40" y="191" as="geometry" />
        </mxCell>
        <mxCell id="peq8d5gX8DXLt__JmTx_-8" parent="1" style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;" 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;" vertex="1">
          <mxGeometry height="70" width="130" x="40" y="471" as="geometry" />
        </mxCell>
        <mxCell id="peq8d5gX8DXLt__JmTx_-12" parent="1" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f5f5f5;strokeColor=#B3B3B3;fontColor=#333333;" value="" vertex="1">
          <mxGeometry height="269" width="452" x="450" y="131" as="geometry" />
        </mxCell>
        <mxCell id="peq8d5gX8DXLt__JmTx_-13" parent="1" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" value="&lt;font style=&quot;font-size: 18px&quot; face=&quot;Verdana&quot;&gt;Updating&lt;/font&gt;" vertex="1">
          <mxGeometry height="20" width="75.91564927857935" x="632.0037624861264" y="141" as="geometry" />
        </mxCell>
        <UserObject label="New props" id="peq8d5gX8DXLt__JmTx_-15">
          <mxCell parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;gradientColor=#E8F1FF;" vertex="1">
            <mxGeometry height="30" width="92" x="468" y="179" as="geometry" />
          </mxCell>
        </UserObject>
        <mxCell id="peq8d5gX8DXLt__JmTx_-16" parent="1" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#B3B3B3;" value="" vertex="1">
          <mxGeometry height="320" width="692" x="210" y="430" as="geometry" />
        </mxCell>
        <mxCell id="peq8d5gX8DXLt__JmTx_-17" parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#E8F1FF;strokeColor=#6c8ebf;" 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;" vertex="1">
          <mxGeometry height="30" width="140" x="242" y="321" as="geometry" />
        </mxCell>
        <mxCell id="bXESYanQTJGo6Cj8_ghC-12" edge="1" parent="1" source="peq8d5gX8DXLt__JmTx_-18" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontFamily=Helvetica;fontSize=12;" target="bXESYanQTJGo6Cj8_ghC-10">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="peq8d5gX8DXLt__JmTx_-18" parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;gradientColor=#C8E8C5;" value="" vertex="1">
          <mxGeometry height="50" width="630" x="242" y="553" as="geometry" />
        </mxCell>
        <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">
          <mxCell parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;dashed=1;gradientColor=#E8F1FF;" vertex="1">
            <mxGeometry height="30" width="90" x="292" y="236" as="geometry" />
          </mxCell>
        </UserObject>
        <mxCell id="peq8d5gX8DXLt__JmTx_-31" parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;gradientColor=#FFF1B8;" 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;" vertex="1">
          <mxGeometry height="50" width="632" x="240" y="461" as="geometry" />
        </mxCell>
        <mxCell id="yjP6mhXBnPZrxiyDEznI-19" edge="1" parent="1" source="peq8d5gX8DXLt__JmTx_-32" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;fontColor=#007FFF;" value="">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="770" y="330" />
              <mxPoint x="671" y="330" />
            </Array>
            <mxPoint x="671" y="350" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <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">
          <mxCell parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;dashed=1;gradientColor=#E8F1FF;" vertex="1">
            <mxGeometry height="30" width="124" x="707.92" y="266" as="geometry" />
          </mxCell>
        </UserObject>
        <mxCell id="peq8d5gX8DXLt__JmTx_-33" edge="1" parent="1" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;" value="">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="339" y="209" as="sourcePoint" />
            <mxPoint x="339" y="236" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="peq8d5gX8DXLt__JmTx_-34" edge="1" parent="1" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;dashed=1;" value="">
          <mxGeometry relative="1" as="geometry">
            <mxPoint x="341" y="265" as="sourcePoint" />
            <mxPoint x="341" y="321" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <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">
          <mxCell parent="1" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1">
            <mxGeometry height="20" width="40" x="299" y="567" as="geometry" />
          </mxCell>
        </UserObject>
        <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">
          <mxCell parent="1" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1">
            <mxGeometry height="20" width="40" x="435" y="567" as="geometry" />
          </mxCell>
        </UserObject>
        <mxCell id="yjP6mhXBnPZrxiyDEznI-13" edge="1" parent="1" source="yjP6mhXBnPZrxiyDEznI-10" 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;" target="peq8d5gX8DXLt__JmTx_-31">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="yjP6mhXBnPZrxiyDEznI-10" parent="1" style="rhombus;whiteSpace=wrap;html=1;labelBackgroundColor=none;fontColor=#007FFF;fillColor=none;aspect=fixed;" value="" vertex="1">
          <mxGeometry height="20" width="20" x="660" y="210" as="geometry" />
        </mxCell>
        <mxCell id="Qn97D7aN3kyVjcPedb_y-5" connectable="0" parent="1" style="group;spacing=2;" value="" vertex="1">
          <mxGeometry height="30" width="404" x="534" y="179" as="geometry" />
        </mxCell>
        <UserObject label="" id="Qn97D7aN3kyVjcPedb_y-1">
          <mxCell parent="Qn97D7aN3kyVjcPedb_y-5" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;gradientColor=#E8F1FF;" vertex="1">
            <mxGeometry height="30" width="332" x="20" as="geometry" />
          </mxCell>
        </UserObject>
        <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">
          <mxCell parent="Qn97D7aN3kyVjcPedb_y-5" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1">
            <mxGeometry height="20" width="40" x="58" y="5" as="geometry" />
          </mxCell>
        </UserObject>
        <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">
          <mxCell parent="Qn97D7aN3kyVjcPedb_y-5" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1">
            <mxGeometry height="20" width="40" x="162" y="5" as="geometry" />
          </mxCell>
        </UserObject>
        <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">
          <mxCell parent="Qn97D7aN3kyVjcPedb_y-5" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1">
            <mxGeometry height="20" width="40" x="275.5" y="5" as="geometry" />
          </mxCell>
        </UserObject>
        <mxCell id="Qn97D7aN3kyVjcPedb_y-7" parent="1" style="text;whiteSpace=wrap;html=1;fillColor=none;align=left;" 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;" vertex="1">
          <mxGeometry height="60" width="160" x="582" y="541" as="geometry" />
        </mxCell>
        <mxCell id="bXESYanQTJGo6Cj8_ghC-6" parent="1" style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;" 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." vertex="1">
          <mxGeometry height="71" width="139" x="42" y="640" as="geometry" />
        </mxCell>
        <mxCell id="bXESYanQTJGo6Cj8_ghC-17" edge="1" parent="1" source="bXESYanQTJGo6Cj8_ghC-10" 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;" target="peq8d5gX8DXLt__JmTx_-18">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="bXESYanQTJGo6Cj8_ghC-10" parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" 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;" vertex="1">
          <mxGeometry height="50" width="631" x="241" y="670" as="geometry" />
        </mxCell>
        <mxCell id="bXESYanQTJGo6Cj8_ghC-15" edge="1" parent="1" style="endArrow=classic;html=1;strokeColor=#000000;entryX=0.377;entryY=-0.02;entryDx=0;entryDy=0;entryPerimeter=0;" value="">
          <mxGeometry height="50" relative="1" width="50" as="geometry">
            <mxPoint x="557.29" y="511" as="sourcePoint" />
            <mxPoint x="557.29" y="552" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="peq8d5gX8DXLt__JmTx_-11" edge="1" parent="1" source="peq8d5gX8DXLt__JmTx_-17" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;" value="">
          <mxGeometry relative="1" as="geometry">
            <Array as="points">
              <mxPoint x="310" y="401" />
              <mxPoint x="310" y="401" />
            </Array>
            <mxPoint x="310" y="461" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="peq8d5gX8DXLt__JmTx_-25" edge="1" parent="1" style="endArrow=none;dashed=1;html=1;fontFamily=Lucida Console;fontSize=12;fontColor=#000000;strokeColor=#B3B3B3;" value="">
          <mxGeometry height="50" relative="1" width="50" as="geometry">
            <mxPoint x="212" y="770" as="sourcePoint" />
            <mxPoint x="900" y="770" as="targetPoint" />
          </mxGeometry>
        </mxCell>
        <mxCell id="bXESYanQTJGo6Cj8_ghC-23" parent="1" style="text;whiteSpace=wrap;html=1;fillColor=none;align=left;" 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;" vertex="1">
          <mxGeometry height="60" width="170" x="582" y="599" as="geometry" />
        </mxCell>
        <mxCell id="bXESYanQTJGo6Cj8_ghC-22" connectable="0" parent="1" style="group" value="" vertex="1">
          <mxGeometry height="27" width="237.5" x="210" y="785.2" as="geometry" />
        </mxCell>
        <mxCell id="peq8d5gX8DXLt__JmTx_-24" parent="bXESYanQTJGo6Cj8_ghC-22" style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;fontSize=12;fontColor=#000000;" 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;" vertex="1">
          <mxGeometry height="15" width="205" x="32.5" y="5" as="geometry" />
        </mxCell>
        <mxCell id="peq8d5gX8DXLt__JmTx_-23" parent="bXESYanQTJGo6Cj8_ghC-22" 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==;" value="" vertex="1">
          <mxGeometry height="27" width="27.675" as="geometry" />
        </mxCell>
        <mxCell id="AQQmuxFUS888oZAzTY0o-6" parent="1" style="shape=image;imageAspect=0;aspect=fixed;verticalLabelPosition=bottom;verticalAlign=top;image=https://www.svgrepo.com/show/167751/refresh.svg;" value="" vertex="1">
          <mxGeometry height="20" width="20" x="547" y="626" as="geometry" />
        </mxCell>
        <mxCell id="peq8d5gX8DXLt__JmTx_-9" parent="1" style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;fontFamily=Verdana;fontStyle=1" value="&lt;font style=&quot;font-size: 26px&quot; color=&quot;#232f3e&quot;&gt;React Hooks Lifecycle&lt;/font&gt;" vertex="1">
          <mxGeometry height="20" width="330" x="294" y="52" as="geometry" />
        </mxCell>
        <mxCell id="dHOrFxX_HmPoJwZjWr78-1" connectable="0" parent="1" style="group" value="" vertex="1">
          <mxGeometry height="59" width="62" x="218" y="34" as="geometry" />
        </mxCell>
        <mxCell id="peq8d5gX8DXLt__JmTx_-19" parent="dHOrFxX_HmPoJwZjWr78-1" style="shape=image;verticalLabelPosition=bottom;labelBackgroundColor=#ffffff;verticalAlign=top;imageAspect=0;image=https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg;" value="" vertex="1">
          <mxGeometry height="47" width="50" x="12" y="12" as="geometry" />
        </mxCell>
        <mxCell id="uvFVxUhtjcqsa5vKmOB1-4" parent="dHOrFxX_HmPoJwZjWr78-1" 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;" value="" vertex="1">
          <mxGeometry height="49" width="21" as="geometry" />
        </mxCell>
        <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">
          <mxCell parent="1" style="text;html=1;resizable=0;points=[];autosize=1;align=left;verticalAlign=top;spacingTop=-4;fontSize=12;fontColor=#000000;fontStyle=4" vertex="1">
            <mxGeometry height="20" width="80" x="836" y="791.12" as="geometry" />
          </mxCell>
        </UserObject>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>
