diagram component lifecycle

Author: zbyte64

lesson2.html

@@ -259,6 +259,21 @@ <h1>Binding data to callbacks</h1>
         </section>
         <section class="container">
             <h1>Lifecycle &amp; Integrations</h1>
+            <p>For arguments and details for each component method see the <a href="https://facebook.github.io/react/docs/component-specs.html">Component Specs &amp; Lifecycle</a></p>
+            <div class="row">
+                <div class="col-sm-4">
+                    <p>When a component is instantiated</p>
+                    <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjI1MCIgaGVpZ2h0PSI1MDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8IS0tIENyZWF0ZWQgd2l0aCBNZXRob2QgRHJhdyAtIGh0dHA6Ly9naXRodWIuY29tL2R1b3BpeGVsL01ldGhvZC1EcmF3LyAtLT4KIDxnPgogIDx0aXRsZT5iYWNrZ3JvdW5kPC90aXRsZT4KICA8cmVjdCBmaWxsPSIjZmZmIiBpZD0iY2FudmFzX2JhY2tncm91bmQiIGhlaWdodD0iNTAyIiB3aWR0aD0iMjUyIiB5PSItMSIgeD0iLTEiLz4KICA8ZyBkaXNwbGF5PSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgeT0iMCIgeD0iMCIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIgaWQ9ImNhbnZhc0dyaWQiPgogICA8cmVjdCBmaWxsPSJ1cmwoI2dyaWRwYXR0ZXJuKSIgc3Ryb2tlLXdpZHRoPSIwIiB5PSIwIiB4PSIwIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIi8+CiAgPC9nPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIHRyYW5zZm9ybT0icm90YXRlKDkwIDExMi4xMTk5NjQ1OTk2MDkzOSw2Mi43MDE2Njc3ODU2NDQ1NCkgIiBpZD0ic3ZnXzEiIGQ9Im0xMTAuMjU2MjU2LDczLjUxOTgwNmw2LjUwMDQxMiwtNi42ODE2MDJsLTEyLjU2ODQ5NywwbC0xMi41NjgyMDcsMGwwLC00LjEzNjUzNmwwLC00LjEzNjUzNmwxMi40MjQxMDMsMGM2LjgzMzQyLDAgMTIuNDI0MjEsLTAuMjA5MzY2IDEyLjQyNDIxLC0wLjQ2NTcwNmMwLC0wLjI1NjM0OCAtMi43MjAxNjksLTMuMjYyODMzIC02LjA0NTI3MywtNi42ODE4NTRsLTYuMDQ0OTY4LC02LjIxNTkwNGw1LjU4NzYzMSwwbDUuNTg3MzQxLDBsOC41MzMzMjUsOC43NTg1MzdsOC41MzM2Myw4Ljc1ODI4NmwtOC41NDk4OTYsOC43NDE0NjNsLTguNTQ5NjIyLDguNzQxNzE0bC01Ljg4MjI3OCwwbC01Ljg4MjMwOSwwbDYuNTAwMzk3LC02LjY4MTg2MmwwLDB6IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlPSIjMDAwIiBmaWxsPSIjZmZmIi8+CiAgPHRleHQgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgdGV4dC1hbmNob3I9ImxlZnQiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjI0IiBpZD0ic3ZnXzIiIHk9IjMwLjUiIHg9Ijg2IiBzdHJva2Utd2lkdGg9IjAiIHN0cm9rZT0iIzAwMCIgZmlsbD0iIzAwMDAwMCI+TmV3PC90ZXh0PgogIDx0ZXh0IHhtbDpzcGFjZT0icHJlc2VydmUiIHRleHQtYW5jaG9yPSJsZWZ0IiBmb250LWZhbWlseT0iSGVsdmV0aWNhLCBBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgaWQ9InN2Z18zIiB5PSIxMDQiIHg9IjM1LjUiIGZpbGwtb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLW9wYWNpdHk9Im51bGwiIHN0cm9rZS13aWR0aD0iMCIgc3Ryb2tlPSIjMDAwIiBmaWxsPSIjMDAwMDAwIj5nZXREZWZhdWx0UHJvcHM8L3RleHQ+CiAgPHRleHQgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgdGV4dC1hbmNob3I9ImxlZnQiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjI0IiBpZD0ic3ZnXzUiIHk9IjE5MCIgeD0iNTEuNSIgZmlsbC1vcGFjaXR5PSJudWxsIiBzdHJva2Utb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLXdpZHRoPSIwIiBzdHJva2U9IiMwMDAiIGZpbGw9IiMwMDAwMDAiPmdldEluaXRpYWxTdGF0ZTwvdGV4dD4KICA8dGV4dCB4bWw6c3BhY2U9InByZXNlcnZlIiB0ZXh0LWFuY2hvcj0ibGVmdCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjQiIGlkPSJzdmdfNyIgeT0iMjcwIiB4PSIxMi41IiBmaWxsLW9wYWNpdHk9Im51bGwiIHN0cm9rZS1vcGFjaXR5PSJudWxsIiBzdHJva2Utd2lkdGg9IjAiIHN0cm9rZT0iIzAwMCIgZmlsbD0iIzAwMDAwMCI+Y29tcG9uZW50V2lsbE1vdW50PC90ZXh0PgogIDx0ZXh0IHhtbDpzcGFjZT0icHJlc2VydmUiIHRleHQtYW5jaG9yPSJsZWZ0IiBmb250LWZhbWlseT0iSGVsdmV0aWNhLCBBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgaWQ9InN2Z184IiB5PSIzNTQiIHg9IjgwLjUiIGZpbGwtb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLW9wYWNpdHk9Im51bGwiIHN0cm9rZS13aWR0aD0iMCIgc3Ryb2tlPSIjMDAwIiBmaWxsPSIjMDAwMDAwIj5yZW5kZXI8L3RleHQ+CiAgPHRleHQgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgdGV4dC1hbmNob3I9ImxlZnQiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjI0IiBpZD0ic3ZnXzkiIHk9IjQ0MyIgeD0iMTEuNSIgZmlsbC1vcGFjaXR5PSJudWxsIiBzdHJva2Utb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLXdpZHRoPSIwIiBzdHJva2U9IiMwMDAiIGZpbGw9IiMwMDAwMDAiPmNvbXBvbmVudERpZE1vdW50PC90ZXh0PgogIDxwYXRoIHRyYW5zZm9ybT0icm90YXRlKDkwIDExMy4xMTk5NjQ1OTk2MDkzNiwxMzcuNzAxNjYwMTU2MjUwMDMpICIgaWQ9InN2Z18xMyIgZD0ibTExMS4yNTYyNjQsMTQ4LjUxOTgwNmw2LjUwMDQwNCwtNi42ODE1OTVsLTEyLjU2ODQ5NywwbC0xMi41NjgyMTQsMGwwLC00LjEzNjUzNmwwLC00LjEzNjU1MWwxMi40MjQxMSwwYzYuODMzNDIsMCAxMi40MjQyMSwtMC4yMDkzNTEgMTIuNDI0MjEsLTAuNDY1Njk4YzAsLTAuMjU2MzQ4IC0yLjcyMDE2OSwtMy4yNjI4MzMgLTYuMDQ1MjgsLTYuNjgxODYybC02LjA0NDk2LC02LjIxNTg4OWw1LjU4NzYzMSwwbDUuNTg3MzQxLDBsOC41MzMzMTgsOC43NTg1M2w4LjUzMzYzOCw4Ljc1ODI4NmwtOC41NDk4OTYsOC43NDE0N2wtOC41NDk2MjIsOC43NDE2OTlsLTUuODgyMjc4LDBsLTUuODgyMzA5LDBsNi41MDA0MDQsLTYuNjgxODU0bDAsMHoiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2U9IiMwMDAiIGZpbGw9IiNmZmYiLz4KICA8cGF0aCB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxMTUuMTE5OTY0NTk5NjA5MzYsMjIzLjcwMTY2MDE1NjI1MDAzKSAiIGlkPSJzdmdfMTQiIGQ9Im0xMTMuMjU2MjY0LDIzNC41MTk4MDZsNi41MDA0MDQsLTYuNjgxNTk1bC0xMi41Njg0OTcsMGwtMTIuNTY4MjE0LDBsMCwtNC4xMzY1MzZsMCwtNC4xMzY1NTFsMTIuNDI0MTEsMGM2LjgzMzQyLDAgMTIuNDI0MjEsLTAuMjA5MzUxIDEyLjQyNDIxLC0wLjQ2NTY5OGMwLC0wLjI1NjM0OCAtMi43MjAxNjksLTMuMjYyODMzIC02LjA0NTI4LC02LjY4MTg1NGwtNi4wNDQ5NiwtNi4yMTU4OTdsNS41ODc2MzEsMGw1LjU4NzM0MSwwbDguNTMzMzE4LDguNzU4NTNsOC41MzM2MzgsOC43NTgyODZsLTguNTQ5ODk2LDguNzQxNDdsLTguNTQ5NjIyLDguNzQxNjk5bC01Ljg4MjI3OCwwbC01Ljg4MjMwOSwwbDYuNTAwNDA0LC02LjY4MTg1NGwwLDB6IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlPSIjMDAwIiBmaWxsPSIjZmZmIi8+CiAgPHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoOTAgMTEyLjExOTk2NDU5OTYwOTMzLDMwNi43MDE2NjAxNTYyNTAwNikgIiBpZD0ic3ZnXzE1IiBkPSJtMTEwLjI1NjI2NCwzMTcuNTE5ODA2bDYuNTAwNDA0LC02LjY4MTYxbC0xMi41Njg0OTcsMGwtMTIuNTY4MjE0LDBsMCwtNC4xMzY1MzZsMCwtNC4xMzY1MzZsMTIuNDI0MTEsMGM2LjgzMzQyLDAgMTIuNDI0MjEsLTAuMjA5MzUxIDEyLjQyNDIxLC0wLjQ2NTY5OGMwLC0wLjI1NjM0OCAtMi43MjAxNjksLTMuMjYyODQ4IC02LjA0NTI4LC02LjY4MTg1NGwtNi4wNDQ5NiwtNi4yMTU5MTJsNS41ODc2MzEsMGw1LjU4NzM0MSwwbDguNTMzMzE4LDguNzU4NTQ1bDguNTMzNjM4LDguNzU4MzAxbC04LjU0OTg5Niw4Ljc0MTQ1NWwtOC41NDk2MjIsOC43NDE2OTlsLTUuODgyMjc4LDBsLTUuODgyMzA5LDBsNi41MDA0MDQsLTYuNjgxODU0bDAsMHoiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2U9IiMwMDAiIGZpbGw9IiNmZmYiLz4KICA8cGF0aCB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxMTMuMTE5OTY0NTk5NjA5MzMsMzg5LjcwMTY2MDE1NjI1MDA2KSAiIGlkPSJzdmdfMTYiIGQ9Im0xMTEuMjU2MjY0LDQwMC41MTk4MDZsNi41MDA0MDQsLTYuNjgxNjFsLTEyLjU2ODQ5NywwbC0xMi41NjgyMTQsMGwwLC00LjEzNjUzNmwwLC00LjEzNjUzNmwxMi40MjQxMSwwYzYuODMzNDIsMCAxMi40MjQyMSwtMC4yMDkzNTEgMTIuNDI0MjEsLTAuNDY1Njk4YzAsLTAuMjU2MzQ4IC0yLjcyMDE2OSwtMy4yNjI4NDggLTYuMDQ1MjgsLTYuNjgxODU0bC02LjA0NDk2LC02LjIxNTkxMmw1LjU4NzYzMSwwbDUuNTg3MzQxLDBsOC41MzMzMSw4Ljc1ODU0NWw4LjUzMzY0Niw4Ljc1ODMwMWwtOC41NDk4OTYsOC43NDE0NTVsLTguNTQ5NjIyLDguNzQxNjk5bC01Ljg4MjI3OCwwbC01Ljg4MjMwOSwwbDYuNTAwNDA0LC02LjY4MTg1NGwwLDB6IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlPSIjMDAwIiBmaWxsPSIjZmZmIi8+CiA8L2c+Cjwvc3ZnPg=="/>
+                </div>
+                <div class="col-sm-4">
+                    <p>When a component's state is updated</p>
+                    <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjI5MCIgaGVpZ2h0PSIzODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8IS0tIENyZWF0ZWQgd2l0aCBNZXRob2QgRHJhdyAtIGh0dHA6Ly9naXRodWIuY29tL2R1b3BpeGVsL01ldGhvZC1EcmF3LyAtLT4KIDxnPgogIDx0aXRsZT5iYWNrZ3JvdW5kPC90aXRsZT4KICA8cmVjdCBmaWxsPSIjZmZmIiBpZD0iY2FudmFzX2JhY2tncm91bmQiIGhlaWdodD0iMzgyIiB3aWR0aD0iMjkyIiB5PSItMSIgeD0iLTEiLz4KICA8ZyBkaXNwbGF5PSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgeT0iMCIgeD0iMCIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIgaWQ9ImNhbnZhc0dyaWQiPgogICA8cmVjdCBmaWxsPSJ1cmwoI2dyaWRwYXR0ZXJuKSIgc3Ryb2tlLXdpZHRoPSIwIiB5PSIwIiB4PSIwIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIi8+CiAgPC9nPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIHRyYW5zZm9ybT0icm90YXRlKDkwIDE0My4xMTk5NjQ1OTk2MDk0LDYxLjcwMTY2Nzc4NTY0NDU0NSkgIiBpZD0ic3ZnXzEiIGQ9Im0xNDEuMjU2MjU2LDcyLjUxOTgwNmw2LjUwMDQxMiwtNi42ODE2MDJsLTEyLjU2ODQ5NywwbC0xMi41NjgyMDcsMGwwLC00LjEzNjUzNmwwLC00LjEzNjUzNmwxMi40MjQxMDMsMGM2LjgzMzQyLDAgMTIuNDI0MjEsLTAuMjA5MzY2IDEyLjQyNDIxLC0wLjQ2NTcwNmMwLC0wLjI1NjM0OCAtMi43MjAxNjksLTMuMjYyODMzIC02LjA0NTI3MywtNi42ODE4NTRsLTYuMDQ0OTY4LC02LjIxNTkwNGw1LjU4NzYzMSwwbDUuNTg3MzQxLDBsOC41MzMzMjUsOC43NTg1MzdsOC41MzM2Myw4Ljc1ODI4NmwtOC41NDk4OTYsOC43NDE0NjNsLTguNTQ5NjIyLDguNzQxNzE0bC01Ljg4MjI3OCwwbC01Ljg4MjMwOSwwbDYuNTAwMzk3LC02LjY4MTg2MmwwLDB6IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlPSIjMDAwIiBmaWxsPSIjZmZmIi8+CiAgPHRleHQgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgdGV4dC1hbmNob3I9ImxlZnQiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjI0IiBpZD0ic3ZnXzIiIHk9IjI5LjUiIHg9Ijk4IiBzdHJva2Utd2lkdGg9IjAiIHN0cm9rZT0iIzAwMCIgZmlsbD0iIzAwMDAwMCI+c2V0U3RhdGU8L3RleHQ+CiAgPHRleHQgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgdGV4dC1hbmNob3I9ImxlZnQiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjI0IiBpZD0ic3ZnXzMiIHk9IjEwMiIgeD0iMTEuNSIgZmlsbC1vcGFjaXR5PSJudWxsIiBzdHJva2Utb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLXdpZHRoPSIwIiBzdHJva2U9IiMwMDAiIGZpbGw9IiMwMDAwMDAiPnNob3VsZENvbXBvbmVudFVwZGF0ZTwvdGV4dD4KICA8dGV4dCB4bWw6c3BhY2U9InByZXNlcnZlIiB0ZXh0LWFuY2hvcj0ibGVmdCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjQiIGlkPSJzdmdfNSIgeT0iMTkyIiB4PSIyMy41IiBmaWxsLW9wYWNpdHk9Im51bGwiIHN0cm9rZS1vcGFjaXR5PSJudWxsIiBzdHJva2Utd2lkdGg9IjAiIHN0cm9rZT0iIzAwMCIgZmlsbD0iIzAwMDAwMCI+Y29tcG9uZW50V2lsbFVwZGF0ZTwvdGV4dD4KICA8dGV4dCB4bWw6c3BhY2U9InByZXNlcnZlIiB0ZXh0LWFuY2hvcj0ibGVmdCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjQiIGlkPSJzdmdfOCIgeT0iMjc1IiB4PSIxMDkuNSIgZmlsbC1vcGFjaXR5PSJudWxsIiBzdHJva2Utb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLXdpZHRoPSIwIiBzdHJva2U9IiMwMDAiIGZpbGw9IiMwMDAwMDAiPnJlbmRlcjwvdGV4dD4KICA8dGV4dCB4bWw6c3BhY2U9InByZXNlcnZlIiB0ZXh0LWFuY2hvcj0ibGVmdCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjQiIGlkPSJzdmdfOSIgeT0iMzYzIiB4PSIyOC41IiBmaWxsLW9wYWNpdHk9Im51bGwiIHN0cm9rZS1vcGFjaXR5PSJudWxsIiBzdHJva2Utd2lkdGg9IjAiIHN0cm9rZT0iIzAwMCIgZmlsbD0iIzAwMDAwMCI+Y29tcG9uZW50RGlkVXBkYXRlPC90ZXh0PgogIDxwYXRoIHRyYW5zZm9ybT0icm90YXRlKDkwIDE0My4xMTk5NjQ1OTk2MDkzOCwxMzguNzAxNjYwMTU2MjUwMDMpICIgaWQ9InN2Z18xMyIgZD0ibTE0MS4yNTYyNTYsMTQ5LjUxOTgwNmw2LjUwMDQxMiwtNi42ODE1OTVsLTEyLjU2ODQ5NywwbC0xMi41NjgyMTQsMGwwLC00LjEzNjUzNmwwLC00LjEzNjU1MWwxMi40MjQxMSwwYzYuODMzNDIsMCAxMi40MjQyMSwtMC4yMDkzNTEgMTIuNDI0MjEsLTAuNDY1Njk4YzAsLTAuMjU2MzQ4IC0yLjcyMDE2OSwtMy4yNjI4MzMgLTYuMDQ1MjczLC02LjY4MTg2MmwtNi4wNDQ5NjgsLTYuMjE1ODg5bDUuNTg3NjMxLDBsNS41ODczNDEsMGw4LjUzMzMxLDguNzU4NTNsOC41MzM2NDYsOC43NTgyODZsLTguNTQ5ODk2LDguNzQxNDdsLTguNTQ5NjIyLDguNzQxNjk5bC01Ljg4MjI3OCwwbC01Ljg4MjMwOSwwbDYuNTAwMzk3LC02LjY4MTg1NGwwLDB6IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlPSIjMDAwIiBmaWxsPSIjZmZmIi8+CiAgPHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoOTAgMTQ0LjExOTk2NDU5OTYwOTM4LDIyNC43MDE2NjAxNTYyNTAwMykgIiBpZD0ic3ZnXzE0IiBkPSJtMTQyLjI1NjI1NiwyMzUuNTE5ODA2bDYuNTAwNDEyLC02LjY4MTU5NWwtMTIuNTY4NDk3LDBsLTEyLjU2ODIwNywwbDAsLTQuMTM2NTM2bDAsLTQuMTM2NTUxbDEyLjQyNDEwMywwYzYuODMzNDIsMCAxMi40MjQyMSwtMC4yMDkzNTEgMTIuNDI0MjEsLTAuNDY1Njk4YzAsLTAuMjU2MzQ4IC0yLjcyMDE2OSwtMy4yNjI4MzMgLTYuMDQ1MjczLC02LjY4MTg1NGwtNi4wNDQ5NjgsLTYuMjE1ODk3bDUuNTg3NjMxLDBsNS41ODczNDEsMGw4LjUzMzMxLDguNzU4NTNsOC41MzM2NDYsOC43NTgyODZsLTguNTQ5ODk2LDguNzQxNDdsLTguNTQ5NjIyLDguNzQxNjk5bC01Ljg4MjI3OCwwbC01Ljg4MjMwOSwwbDYuNTAwMzk3LC02LjY4MTg1NGwwLDB6IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlPSIjMDAwIiBmaWxsPSIjZmZmIi8+CiAgPHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoOTAgMTQ2LjExOTk2NDU5OTYwOTM1LDMwOS43MDE2NjAxNTYyNTAwNikgIiBpZD0ic3ZnXzE2IiBkPSJtMTQ0LjI1NjI1NiwzMjAuNTE5ODA2bDYuNTAwNDEyLC02LjY4MTYxbC0xMi41Njg0OTcsMGwtMTIuNTY4MjA3LDBsMCwtNC4xMzY1MzZsMCwtNC4xMzY1MzZsMTIuNDI0MTAzLDBjNi44MzM0MiwwIDEyLjQyNDIxLC0wLjIwOTM1MSAxMi40MjQyMSwtMC40NjU2OThjMCwtMC4yNTYzNDggLTIuNzIwMTY5LC0zLjI2Mjg0OCAtNi4wNDUyNzMsLTYuNjgxODU0bC02LjA0NDk2OCwtNi4yMTU5MTJsNS41ODc2MzEsMGw1LjU4NzM0MSwwbDguNTMzMzEsOC43NTg1NDVsOC41MzM2NDYsOC43NTgzMDFsLTguNTQ5ODk2LDguNzQxNDU1bC04LjU0OTYyMiw4Ljc0MTY5OWwtNS44ODIyNzgsMGwtNS44ODIzMDksMGw2LjUwMDM5NywtNi42ODE4NTRsMCwweiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iIzAwMCIgZmlsbD0iI2ZmZiIvPgogPC9nPgo8L3N2Zz4="/>
+                </div>
+                <div class="col-sm-4">
+                    <p>When a component's props is updated (either by parent or setProps)</p>
+                    <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+Cjxzdmcgd2lkdGg9IjMyMCIgaGVpZ2h0PSI0NDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8IS0tIENyZWF0ZWQgd2l0aCBNZXRob2QgRHJhdyAtIGh0dHA6Ly9naXRodWIuY29tL2R1b3BpeGVsL01ldGhvZC1EcmF3LyAtLT4KIDxnPgogIDx0aXRsZT5iYWNrZ3JvdW5kPC90aXRsZT4KICA8cmVjdCBmaWxsPSIjZmZmIiBpZD0iY2FudmFzX2JhY2tncm91bmQiIGhlaWdodD0iNDQyIiB3aWR0aD0iMzIyIiB5PSItMSIgeD0iLTEiLz4KICA8ZyBkaXNwbGF5PSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgeT0iMCIgeD0iMCIgaGVpZ2h0PSIxMDAlIiB3aWR0aD0iMTAwJSIgaWQ9ImNhbnZhc0dyaWQiPgogICA8cmVjdCBmaWxsPSJ1cmwoI2dyaWRwYXR0ZXJuKSIgc3Ryb2tlLXdpZHRoPSIwIiB5PSIwIiB4PSIwIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIi8+CiAgPC9nPgogPC9nPgogPGc+CiAgPHRpdGxlPkxheWVyIDE8L3RpdGxlPgogIDxwYXRoIHRyYW5zZm9ybT0icm90YXRlKDkwIDE2Mi4xMTk5NjQ1OTk2MDk0LDY1LjcwMTY2Nzc4NTY0NDU1KSAiIGlkPSJzdmdfMSIgZD0ibTE2MC4yNTYyNTYsNzYuNTE5ODA2bDYuNTAwNDEyLC02LjY4MTYwMmwtMTIuNTY4NDk3LDBsLTEyLjU2ODIwNywwbDAsLTQuMTM2NTM2bDAsLTQuMTM2NTM2bDEyLjQyNDEwMywwYzYuODMzNDIsMCAxMi40MjQyMSwtMC4yMDkzNjYgMTIuNDI0MjEsLTAuNDY1NzA2YzAsLTAuMjU2MzQ4IC0yLjcyMDE2OSwtMy4yNjI4MzMgLTYuMDQ1MjczLC02LjY4MTg1NGwtNi4wNDQ5NjgsLTYuMjE1OTA0bDUuNTg3NjMxLDBsNS41ODczNDEsMGw4LjUzMzMyNSw4Ljc1ODUzN2w4LjUzMzYzLDguNzU4Mjg2bC04LjU0OTg5Niw4Ljc0MTQ2M2wtOC41NDk2MjIsOC43NDE3MTRsLTUuODgyMjc4LDBsLTUuODgyMzA5LDBsNi41MDAzOTcsLTYuNjgxODYybDAsMHoiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2U9IiMwMDAiIGZpbGw9IiNmZmYiLz4KICA8dGV4dCB4bWw6c3BhY2U9InByZXNlcnZlIiB0ZXh0LWFuY2hvcj0ibGVmdCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjQiIGlkPSJzdmdfMiIgeT0iMzIuNSIgeD0iMTExIiBzdHJva2Utd2lkdGg9IjAiIHN0cm9rZT0iIzAwMCIgZmlsbD0iIzAwMDAwMCI+c2V0UHJvcHM8L3RleHQ+CiAgPHRleHQgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgdGV4dC1hbmNob3I9ImxlZnQiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmIiBmb250LXNpemU9IjI0IiBpZD0ic3ZnXzMiIHk9IjE4MiIgeD0iMjguNSIgZmlsbC1vcGFjaXR5PSJudWxsIiBzdHJva2Utb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLXdpZHRoPSIwIiBzdHJva2U9IiMwMDAiIGZpbGw9IiMwMDAwMDAiPnNob3VsZENvbXBvbmVudFVwZGF0ZTwvdGV4dD4KICA8dGV4dCB4bWw6c3BhY2U9InByZXNlcnZlIiB0ZXh0LWFuY2hvcj0ibGVmdCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjQiIGlkPSJzdmdfNSIgeT0iMjU3IiB4PSI0NS41IiBmaWxsLW9wYWNpdHk9Im51bGwiIHN0cm9rZS1vcGFjaXR5PSJudWxsIiBzdHJva2Utd2lkdGg9IjAiIHN0cm9rZT0iIzAwMCIgZmlsbD0iIzAwMDAwMCI+Y29tcG9uZW50V2lsbFVwZGF0ZTwvdGV4dD4KICA8dGV4dCB4bWw6c3BhY2U9InByZXNlcnZlIiB0ZXh0LWFuY2hvcj0ibGVmdCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjQiIGlkPSJzdmdfOCIgeT0iMzM5IiB4PSIxMjguNSIgZmlsbC1vcGFjaXR5PSJudWxsIiBzdHJva2Utb3BhY2l0eT0ibnVsbCIgc3Ryb2tlLXdpZHRoPSIwIiBzdHJva2U9IiMwMDAiIGZpbGw9IiMwMDAwMDAiPnJlbmRlcjwvdGV4dD4KICA8dGV4dCB4bWw6c3BhY2U9InByZXNlcnZlIiB0ZXh0LWFuY2hvcj0ibGVmdCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjQiIGlkPSJzdmdfOSIgeT0iNDI0IiB4PSI0Ni41IiBmaWxsLW9wYWNpdHk9Im51bGwiIHN0cm9rZS1vcGFjaXR5PSJudWxsIiBzdHJva2Utd2lkdGg9IjAiIHN0cm9rZT0iIzAwMCIgZmlsbD0iIzAwMDAwMCI+Y29tcG9uZW50RGlkVXBkYXRlPC90ZXh0PgogIDxwYXRoIHRyYW5zZm9ybT0icm90YXRlKDkwIDE2Mi4xMTk5NjQ1OTk2MDkzOCwyMTEuNzAxNjYwMTU2MjUwMDMpICIgaWQ9InN2Z18xMyIgZD0ibTE2MC4yNTYyNTYsMjIyLjUxOTgwNmw2LjUwMDQxMiwtNi42ODE1OTVsLTEyLjU2ODQ5NywwbC0xMi41NjgyMDcsMGwwLC00LjEzNjUzNmwwLC00LjEzNjU1MWwxMi40MjQxMDMsMGM2LjgzMzQyLDAgMTIuNDI0MjEsLTAuMjA5MzUxIDEyLjQyNDIxLC0wLjQ2NTY5OGMwLC0wLjI1NjM0OCAtMi43MjAxNjksLTMuMjYyODMzIC02LjA0NTI3MywtNi42ODE4N2wtNi4wNDQ5NjgsLTYuMjE1ODgxbDUuNTg3NjMxLDBsNS41ODczNDEsMGw4LjUzMzMxLDguNzU4NTNsOC41MzM2NDYsOC43NTgyODZsLTguNTQ5ODk2LDguNzQxNDdsLTguNTQ5NjIyLDguNzQxNjk5bC01Ljg4MjI3OCwwbC01Ljg4MjMwOSwwbDYuNTAwMzk3LC02LjY4MTg1NGwwLDB6IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlPSIjMDAwIiBmaWxsPSIjZmZmIi8+CiAgPHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoOTAgMTYyLjExOTk2NDU5OTYwOTM1LDI4OS43MDE2NjAxNTYyNTAwNikgIiBpZD0ic3ZnXzE0IiBkPSJtMTYwLjI1NjI1NiwzMDAuNTE5ODA2bDYuNTAwNDEyLC02LjY4MTU4bC0xMi41Njg0OTcsMGwtMTIuNTY4MjA3LDBsMCwtNC4xMzY1NjZsMCwtNC4xMzY1MzZsMTIuNDI0MTAzLDBjNi44MzM0MiwwIDEyLjQyNDIxLC0wLjIwOTM1MSAxMi40MjQyMSwtMC40NjU2OThjMCwtMC4yNTYzNDggLTIuNzIwMTY5LC0zLjI2MjgxNyAtNi4wNDUyNzMsLTYuNjgxODU0bC02LjA0NDk2OCwtNi4yMTU4ODFsNS41ODc2MzEsMGw1LjU4NzM0MSwwbDguNTMzMzEsOC43NTg1MTRsOC41MzM2NDYsOC43NTgzMDFsLTguNTQ5ODk2LDguNzQxNDU1bC04LjU0OTYyMiw4Ljc0MTY5OWwtNS44ODIyNzgsMGwtNS44ODIzMDksMGw2LjUwMDM5NywtNi42ODE4NTRsMCwweiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iIzAwMCIgZmlsbD0iI2ZmZiIvPgogIDxwYXRoIHRyYW5zZm9ybT0icm90YXRlKDkwIDE2Mi4xMTk5NjQ1OTk2MDkzNSwzNzMuNzAxNjYwMTU2MjUwMDYpICIgaWQ9InN2Z18xNiIgZD0ibTE2MC4yNTYyNTYsMzg0LjUxOTgwNmw2LjUwMDQxMiwtNi42ODE2MWwtMTIuNTY4NDk3LDBsLTEyLjU2ODIwNywwbDAsLTQuMTM2NTM2bDAsLTQuMTM2NTM2bDEyLjQyNDEwMywwYzYuODMzNDIsMCAxMi40MjQyMSwtMC4yMDkzNTEgMTIuNDI0MjEsLTAuNDY1Njk4YzAsLTAuMjU2MzQ4IC0yLjcyMDE2OSwtMy4yNjI4NDggLTYuMDQ1MjczLC02LjY4MTg1NGwtNi4wNDQ5NjgsLTYuMjE1OTEybDUuNTg3NjMxLDBsNS41ODczNDEsMGw4LjUzMzMxLDguNzU4NTQ1bDguNTMzNjQ2LDguNzU4MzAxbC04LjU0OTg5Niw4Ljc0MTQ1NWwtOC41NDk2MjIsOC43NDE2OTlsLTUuODgyMjc4LDBsLTUuODgyMzA5LDBsNi41MDAzOTcsLTYuNjgxODU0bDAsMHoiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2U9IiMwMDAiIGZpbGw9IiNmZmYiLz4KICA8cGF0aCB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxNjMuMTE5OTY0NTk5NjA5MzgsMTQyLjcwMTY2MDE1NjI1MDAzKSAiIGlkPSJzdmdfMTciIGQ9Im0xNjEuMjU2MjU2LDE1My41MTk4MDZsNi41MDA0MTIsLTYuNjgxNTk1bC0xMi41Njg0OTcsMGwtMTIuNTY4MjA3LDBsMCwtNC4xMzY1NTFsMCwtNC4xMzY1MmwxMi40MjQxMDMsMGM2LjgzMzQyLDAgMTIuNDI0MjEsLTAuMjA5MzY2IDEyLjQyNDIxLC0wLjQ2NTcxNGMwLC0wLjI1NjM0OCAtMi43MjAxNjksLTMuMjYyODMzIC02LjA0NTI3MywtNi42ODE4NTRsLTYuMDQ0OTY4LC02LjIxNTkwNGw1LjU4NzYzMSwwbDUuNTg3MzQxLDBsOC41MzMzMjUsOC43NTg1MzdsOC41MzM2Myw4Ljc1ODI4NmwtOC41NDk4OTYsOC43NDE0N2wtOC41NDk2MjIsOC43NDE2OTlsLTUuODgyMjc4LDBsLTUuODgyMzA5LDBsNi41MDAzOTcsLTYuNjgxODU0bDAsMHoiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2U9IiMwMDAiIGZpbGw9IiNmZmYiLz4KICA8dGV4dCB4bWw6c3BhY2U9InByZXNlcnZlIiB0ZXh0LWFuY2hvcj0ibGVmdCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSwgQXJpYWwsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjQiIGlkPSJzdmdfMTgiIHk9IjExMC41IiB4PSIxMCIgc3Ryb2tlLXdpZHRoPSIwIiBzdHJva2U9IiMwMDAiIGZpbGw9IiMwMDAwMDAiPmNvbXBvbmVudFdpbGxSZWNlaXZlUHJvcHM8L3RleHQ+CiA8L2c+Cjwvc3ZnPg=="/>
+                </div>
+            </div>
             <div class="row">
                 <div class="col-sm-4">
                     <p>
@@ -269,7 +284,7 @@ <h1>Lifecycle &amp; Integrations</h1>
                     <ul>
                         <li>Component looks up source code with the given sourceId property</li>
                         <li>Component renders source code in a code tag</li>
-                        <li>Uses <a href="https://facebook.github.io/react/docs/component-specs.html">life cycle events</a> to trigger Prism load</li>
+                        <li>componentDidMount &amp; componentDidUpdate to trigger Prism load and updates</li>
                         <li>On code change optionally re-evaluate the code</li>
                         <li>Seperate routine mounts a component for each sourceCode instance</li>
                     </ul>