1"use strict";(self.webpackChunk_stencil_stencil_site=self.webpackChunk_stencil_stencil_site||[]).push([[7634],{61098:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>a,contentTitle:()=>l,default:()=>p,frontMatter:()=>d,metadata:()=>s,toc:()=>r});var o=t(74848),c=t(28453),i=t(87193);const d={title:"Component Lifecycle Methods",sidebar_label:"Lifecycle Methods",description:"Component Lifecycle Methods",slug:"/component-lifecycle"},l="Component Lifecycle Methods",s={id:"components/component-lifecycle",title:"Component Lifecycle Methods",description:"Component Lifecycle Methods",source:"@site/versioned_docs/version-v4.43/components/component-lifecycle.md",sourceDirName:"components",slug:"/component-lifecycle",permalink:"/docs/component-lifecycle",draft:!1,unlisted:!1,editUrl:"https://github.com/ionic-team/stencil-site/tree/main/versioned_docs/version-v4.43/components/component-lifecycle.md",tags:[],version:"v4.43",frontMatter:{title:"Component Lifecycle Methods",sidebar_label:"Lifecycle Methods",description:"Component Lifecycle Methods",slug:"/component-lifecycle"},sidebar:"docs",previous:{title:"Attach Internals",permalink:"/docs/attach-internals"},next:{title:"Component",permalink:"/docs/component"}},a={},r=[{value:"connectedCallback()",id:"connectedcallback",level:2},{value:"disconnectedCallback()",id:"disconnectedcallback",level:2},{value:"componentWillLoad()",id:"componentwillload",level:2},{value:"componentDidLoad()",id:"componentdidload",level:2},{value:"componentShouldUpdate()",id:"componentshouldupdate",level:2},{value:"componentWillRender()",id:"componentwillrender",level:2},{value:"componentDidRender()",id:"componentdidrender",level:2},{value:"componentWillUpdate()",id:"componentwillupdate",level:2},{value:"componentDidUpdate()",id:"componentdidupdate",level:2},{value:"Rendering State",id:"rendering-state",level:2},{value:"Lifecycle Hierarchy",id:"lifecycle-hierarchy",level:2},{value:"Async Lifecycle Methods",id:"async-lifecycle-methods",level:2},{value:"Example",id:"example",level:2}];function h(e){const n={a:"a",code:"code",em:"em",h1:"h1",h2:"h2",header:"header",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",...(0,c.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"component-lifecycle-methods",children:"Component Lifecycle Methods"})}),"\n",(0,o.jsx)(n.p,{children:'Components have numerous lifecycle methods which can be used to know when the component "will" and "did" load, update, and render. These methods can be added to a component to hook into operations at the right time.'}),"\n",(0,o.jsx)(n.p,{children:"Implement one of the following methods within a component class and Stencil will automatically call them in the right order:"}),"\n","\n",(0,o.jsx)(i.A,{}),"\n",(0,o.jsx)(n.h2,{id:"connectedcallback",children:"connectedCallback()"}),"\n",(0,o.jsxs)(n.p,{children:["Called every time the component is connected to the DOM.\nWhen the component is first connected, this method is called before ",(0,o.jsx)(n.code,{children:"componentWillLoad"}),"."]}),"\n",(0,o.jsxs)(n.p,{children:["It's important to note that this method can be called more than once, every time, the element is ",(0,o.jsx)(n.strong,{children:"attached"})," or ",(0,o.jsx)(n.strong,{children:"moved"})," in the DOM. For logic that needs to run every time the element is attached or moved in the DOM, it is considered a best practice to use this lifecycle method."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:"const el = document.createElement('my-cmp');\ndocument.body.appendChild(el);\n// connectedCallback() called\n// componentWillLoad() called (first time)\n\nel.remove();\n// disconnectedCallback()\n\ndocument.body.appendChild(el);\n// connectedCallback() called again, but `componentWillLoad()` is not.\n"})}),"\n",(0,o.jsxs)(n.p,{children:["This ",(0,o.jsx)(n.code,{children:"lifecycle"})," hook follows the same semantics as the one described by the ",(0,o.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements",children:"Custom Elements Spec"})]}),"\n",(0,o.jsx)(n.h2,{id:"disconnectedcallback",children:"disconnectedCallback()"}),"\n",(0,o.jsx)(n.p,{children:'Called every time the component is disconnected from the DOM, ie, it can be dispatched more than once, DO not confuse with a "onDestroy" kind of event.'}),"\n",(0,o.jsxs)(n.p,{children:["This ",(0,o.jsx)(n.code,{children:"lifecycle"})," hook follows the same semantics as the one described by the ",(0,o.jsx)(n.a,{href:"https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements",children:"Custom Elements Spec"}),"."]}),"\n",(0,o.jsx)(n.h2,{id:"componentwillload",children:"componentWillLoad()"}),"\n",(0,o.jsx)(n.p,{children:"Called once just after the component is first connected to the DOM. Since this method is only called once, it's a good place to load data asynchronously and to setup the state without triggering extra re-renders."}),"\n",(0,o.jsxs)(n.p,{children:["A promise can be returned, that can be used to wait for the first ",(0,o.jsx)(n.code,{children:"render()"}),"."]}),"\n",(0,o.jsx)(n.h2,{id:"componentdidload",children:"componentDidLoad()"}),"\n",(0,o.jsxs)(n.p,{children:["Called once just after the component is fully loaded and the first ",(0,o.jsx)(n.code,{children:"render()"})," occurs."]}),"\n",(0,o.jsx)(n.h2,{id:"componentshouldupdate",children:"componentShouldUpdate()"}),"\n",(0,o.jsxs)(n.p,{children:["This hook is called when a component's ",(0,o.jsx)(n.a,{href:"/docs/properties",children:(0,o.jsx)(n.code,{children:"Prop"})})," or ",(0,o.jsx)(n.a,{href:"/docs/state",children:(0,o.jsx)(n.code,{children:"State"})})," property changes and a rerender is about to be requested. This hook re
1ceives three arguments: the new value, the old value and the name of the changed state. It should return a boolean to indicate if the component should rerender (",(0,o.jsx)(n.code,{children:"true"}),") or not (",(0,o.jsx)(n.code,{children:"false"}),")."]}),"\n",(0,o.jsx)(n.p,{children:"A couple of things to notice is that this method will not be executed before the initial render, that is, when the component is first attached to the dom, nor when a rerender is already scheduled in the next frame."}),"\n",(0,o.jsx)(n.p,{children:"Let\u2019s say the following two props of a component change synchronously:"}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:"component.somePropA = 42;\ncomponent.somePropB = 88;\n"})}),"\n",(0,o.jsxs)(n.p,{children:["The ",(0,o.jsx)(n.code,{children:"componentShouldUpdate"})," will be first called with arguments: ",(0,o.jsx)(n.code,{children:"42"}),", ",(0,o.jsx)(n.code,{children:"undefined"})," and ",(0,o.jsx)(n.code,{children:"somePropA"}),". If it does return ",(0,o.jsx)(n.code,{children:"true"}),", the hook will not be called again since the rerender is already scheduled to happen. Instead, if the first hook returned ",(0,o.jsx)(n.code,{children:"false"}),", then ",(0,o.jsx)(n.code,{children:"componentShouldUpdate"})," will be called again with ",(0,o.jsx)(n.code,{children:"88"}),", ",(0,o.jsx)(n.code,{children:"undefined"})," and ",(0,o.jsx)(n.code,{children:"somePropB"})," as arguments, triggered by the ",(0,o.jsx)(n.code,{children:"component.somePropB = 88"})," mutation."]}),"\n",(0,o.jsxs)(n.p,{children:["Since the execution of this hook might be conditioned, it's not good to rely on it to watch for prop changes, instead use the ",(0,o.jsx)(n.code,{children:"@Watch"})," decorator for that."]}),"\n",(0,o.jsx)(n.h2,{id:"componentwillrender",children:"componentWillRender()"}),"\n",(0,o.jsxs)(n.p,{children:["Called before every ",(0,o.jsx)(n.code,{children:"render()"}),"."]}),"\n",(0,o.jsx)(n.p,{children:"A promise can be returned, that can be used to wait for the upcoming render."}),"\n",(0,o.jsx)(n.h2,{id:"componentdidrender",children:"componentDidRender()"}),"\n",(0,o.jsxs)(n.p,{children:["Called after every ",(0,o.jsx)(n.code,{children:"render()"}),"."]}),"\n",(0,o.jsx)(n.h2,{id:"componentwillupdate",children:"componentWillUpdate()"}),"\n",(0,o.jsxs)(n.p,{children:["Called when the component is about to be updated because some ",(0,o.jsx)(n.code,{children:"Prop()"})," or ",(0,o.jsx)(n.code,{children:"State()"})," changed.\nIt's never called during the first ",(0,o.jsx)(n.code,{children:"render()"}),"."]}),"\n",(0,o.jsx)(n.p,{children:"A promise can be returned, that can be used to wait for the next render."}),"\n",(0,o.jsx)(n.h2,{id:"componentdidupdate",children:"componentDidUpdate()"}),"\n",(0,o.jsxs)(n.p,{children:["Called just after the component updates.\nIt's never called during the first ",(0,o.jsx)(n.code,{children:"render()"}),"."]}),"\n",(0,o.jsx)(n.h2,{id:"rendering-state",children:"Rendering State"}),"\n",(0,o.jsxs)(n.p,{children:["It's always recommended to make any rendered state updates within ",(0,o.jsx)(n.code,{children:"componentWillRender()"}),", since this is the method which get called ",(0,o.jsx)(n.em,{children:"before"})," the ",(0,o.jsx)(n.code,{children:"render()"})," method. Alternatively, updating rendered state with the ",(0,o.jsx)(n.code,{children:"componentDidLoad()"}),", ",(0,o.jsx)(n.code,{children:"componentDidUpdate()"})," and ",(0,o.jsx)(n.code,{children:"componentDidRender()"})," methods will cause another rerender, which isn't ideal for performance."]}),"\n",(0,o.jsxs)(n.p,{children:["If state ",(0,o.jsx)(n.em,{children:"must"})," be updated in ",(0,o.jsx)(n.code,{children:"componentDidUpdate()"})," or ",(0,o.jsx)(n.code,{children:"componentDidRender()"}),", it has the potential of getting components stuck in an infinite loop. If updating state within ",(0,o.jsx)(n.code,{children:"componentDidUpdate()"}),' is unavoidable, then the method should also come with a way to detect if the props or state is "dirty" or not (is the data actually different or is it the same as before). By doing a dirty check, ',(0,o.jsx)(n.code,{children:"componentDidUpdate()"})," is able to avoid rendering the same data, and which in turn calls ",(0,o.jsx)(n.code,{children:"componentDidUpdate()"})," again."]}),"\n",(0,o.jsx)(n.h2,{id:"lifecycle-hierarchy",children:"Lifecycle Hierarchy"}),"\n",(0,o.jsxs)(n.p,{children:["A useful feature of lifecycle methods is that they take their child component's lifecycle into consideration too. For example, if the parent component, ",(0,o.jsx)(n.code,{children:"cmp-a"}),", has a child component, ",(0,o.jsx)(n.code,{children:"cmp-b"}),", then ",(0,o.jsx)(n.code,{children:"cmp-a"}),' isn\'t considered "loaded" until ',(0,o.jsx)(n.code,{children:"cmp-b"})," has finished loading. Another way to put it is that the deepest components finish loading first, then the ",(0,o.jsx)(n.code,{children:"componentDidLoad()"})," calls bubble up."]}),"\n",(0,o.jsx)(n.p,{children:"It's also important to note that even though Stencil can lazy-load components, and has asynchronous rendering, the lifecycle methods are still called in the correct order. So while the top-level component could have already been loaded, all of its lifecycle methods are still called in the correct order, which means it'll wait for a child components to finish loading. The same goes for the exact opposite, where the child components may already be ready while the parent isn't."}),"\n",(0,o.jsx)(n.p,{children:"In the example below we have a simple hierarchy of components. The numbered list shows the order of which the lifecycle methods will fire."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-markup",children:" <cmp-a>\n <cmp-b>\n <cmp-c></cmp-c>\n </cmp-b>\n </cmp-a>\n"})}),"\n",(0,o.jsxs)(n.ol,{children:["\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"cmp-a"})," - ",(0,o.jsx)(n.code,{children:"componentWillLoad()"})]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"cmp-b"})," - ",(0,o.jsx)(n.code,{children:"componentWillLoad()"})]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"cmp-c"})," - ",(0,o.jsx)(n.code,{children:"componentWillLoad()"})]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"cmp-c"})," - ",(0,o.jsx)(n.code,{children:"componentDidLoad()"})]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"cmp-b"})," - ",(0,o.jsx)(n.code,{children:"componentDidLoad()"})]}),"\n",(0,o.jsxs)(n.li,{children:[(0,o.jsx)(n.code,{children:"cmp-a"})," - ",(0,o.jsx)(n.code,{children:"componentDidLoad()"})]}),"\n"]}),"\n",(0,o.jsx)(n.p,{children:"Even if some components may or may not be already loaded, the entire component hierarchy waits on its child components to finish loading and rendering."}),"\n",(0,o.jsx)(n.h2,{id:"async-lifecycle-methods",children:"Async Lifecycle Methods"}),"\n",(0,o.jsxs)(n.p,{children:["Some lifecycle methods, e.g. ",(0,o.jsx)(n.code,{children:"componentWillRender"}),", ",(0,o.jsx)(n.code,{children:"componentWillLoad"})," and ",(0,o.jsx)(n.code,{children:"componentWillUpdate"}),", can also return promises which allows the method to asynchronously retrieve data or perform any async tasks. A great example of this is fetching data to be rendered in a component. For example, this very site you're reading first fetches content data before rendering. But because ",(0,o.jsx)(n.code,{children:"fetch()"})," is async, it's important that ",(0,o.jsx)(n.code,{children:"componentWillLoad()"})," returns a ",(0,o.jsx)(n.code,{children:"Promise"}),' to ensure its parent component isn\'t considered "loaded" until all of its content has rendered.']}),"\n",(0,o.jsxs)(n.p,{children:["Below is a quick example showing how ",(0,o.jsx)(n.code,{children:"componentWillLoad()"})," is able to have its parent component wait on it to finish loading its data."]}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:"componentWillLoad() {\n return fetch('/some-data.json')\n .then(response => response.json())\n .then(data => {\n this.content = data;\n });\n}\n"})}),"\n",(0,o.jsx)(n.h2,{id:"example",children:"Example"}),"\n",(0,o.jsx)(n.p,{children:"This simple example shows a clock and updates the current time every second. The timer is started when the component is added to the DOM. Once it's removed from the DOM, the timer is stopped."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{className:"language-tsx",children:"import { Component, State, h } from '@stencil/core';\n\n@Component({\n tag: 'custom-clock'\n})\nexport class CustomClock {\n\n timer: number;\n\n @State() time: number = Date.now();\n\n connectedCallback() {\n this.timer = window.setInterval(() =>
1 {\n this.time = Date.now();\n }, 1000);\n }\n\n disconnectedCallback() {\n window.clearInterval(this.timer);\n }\n\n render() {\n const time = new Date(this.time).toLocaleTimeString();\n\n return (\n <span>{ time }</span>\n );\n }\n}\n"})})]})}function p(e={}){const{wrapper:n}={...(0,c.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(h,{...e})}):h(e)}},87193:(e,n,t)=>{t.d(n,{A:()=>l});var o=t(96540),c=t(14783);const i={lifecycleChart:"lifecycleChart_x5b9","#":"#_D0Vq",highlight:"highlight_KYfj",trigger:"trigger_Z0PT","highlight-init":"highlight-init_p2HR",pathInit:"pathInit_un9K","highlight-attached":"highlight-attached_ofw7",pathAttached:"pathAttached_CXQN","highlight-removed":"highlight-removed_BFGl",pathRemoved:"pathRemoved_epzo","highlight-update":"highlight-update_mTQ2",pathUpdate:"pathUpdate_VwyZ"};var d=t(74848);function l(){const[e,n]=(0,o.useState)("none"),t="none"===e?"":` ${i.highlight} ${i[`highlight-${e}`]}`;return(0,d.jsx)("div",{className:i.lifecycleChart+t,children:(0,d.jsx)("svg",{version:"1.1",viewBox:"0 0 642.5 922",xmlns:"http://www.w3.org/2000/svg",children:(0,d.jsx)("g",{fillRule:"evenodd",children:(0,d.jsxs)("g",{fill:"none",strokeLinecap:"square",children:[(0,d.jsx)("path",{d:"m552 743c49.706 0 90-40.294 90-90v-488c0-58.5-47.2-106-105.5-106-58.393 0.16547-105.61 47.607-105.5 106l0.4 68",stroke:"#7b83a6",className:i.pathUpdate}),(0,d.jsx)("path",{d:"m437.7 600.3-6.3 6.3-6.3-6.3",stroke:"#b3b6c5",className:i.pathUpdate}),(0,d.jsx)("path",{d:"m431.4 347.5v258",stroke:"#7b83a6",className:i.pathUpdate}),(0,d.jsx)("path",{d:"m431.4 282.5v24.337",stroke:"#7b83a6",strokeDasharray:"1, 6",className:i.pathUpdate}),(0,d.jsx)("path",{d:"m126.4 50v555.5",stroke:"#212431",className:i.pathInit}),(0,d.jsx)("path",{d:"m132.7 600.3-6.3 6.3-6.3-6.3",stroke:"#212431",className:i.pathInit}),(0,d.jsx)("path",{d:"m278 50v27.5",stroke:"#575e7f",className:i.pathAttached}),(0,d.jsx)("path",{d:"m284.3 71.993-6.3 6.3-6.3-6.3",stroke:"#575e7f",className:i.pathAttached}),(0,d.jsx)("path",{d:"m278.5 829v29.5",stroke:"#575e7f",className:i.pathRemoved}),(0,d.jsx)("path",{d:"m284.8 852.3-6.3 6.3-6.3-6.3",stroke:"#575e7f",className:i.pathRemoved}),(0,d.jsxs)("g",{fontFamily:"SFMono-Regular, 'SF Mono', 'Lucida Console', monospace",fontSize:"15px",children:[(0,d.jsx)("g",{children:(0,d.jsxs)(c.default,{to:"#componentdidload",className:i.pathInit,children:[(0,d.jsx)("rect",{y:"620",width:"252",height:"49",rx:"24.5",ry:"24.5",fill:"#212431"}),(0,d.jsx)("text",{x:"2.2028809",y:"166.83597",fill:"#fff",children:(0,d.jsx)("tspan",{x:"45.202881",y:"648.83594",children:"componentDidLoad()"})})]})}),(0,d.jsx)("g",{children:(0,d.jsxs)(c.default,{to:"#componentdidupdate",className:i.pathUpdate,children:[(0,d.jsx)("rect",{x:"303",y:"620",width:"252",height:"49",rx:"24.5",ry:"24.5",fill:"#7b83a6"}),(0,d.jsx)("text",{x:"2.8501587",y:"166.83597",fill:"#fff",children:(0,d.jsx)("tspan",{x:"339.15015",y:"648.83594",children:"componentDidUpdate()"})})]})}),(0,d.jsx)("g",{children:(0,d.jsxs)(c.default,{href:"#disconnectedcallback",className:i.pathRemoved,children:[(0,d.jsx)("rect",{x:"152.5",y:"873",width:"252",height:"49",rx:"24.5",ry:"24.5",fill:"#4b516e"}),(0,d.jsx)("text",{x:"-18.570755",y:"148.19852",fill:"#fff",children:(0,d.jsx)("tspan",{x:"179.72925",y:"902.19849",children:"disconnectedCallback()"})})]})}),(0,d.jsx)("g",{children:(0,d.jsxs)(c.default,{to:"reactive-data#the-watch-decorator-watch",className:i.pathUpdate,children:[(0,d.jsx)("rect",{x:"303",y:"161",width:"252",height:"49",rx:"24.5",ry:"24.5",fill:"#7b83a6"}),(0,d.jsx)("text",{x:"2.5288086",y:"-8",fill:"#fff",children:(0,d.jsx)("tspan",{x:"348.52881",y:"190",children:"@Watch(\u2018propName\u2019)"})})]})}),(0,d.jsx)("g",{children:(0,d.jsxs)(c.default,{to:"templating-jsx",className:i.pathInit+" "+i.pathUpdate,children:[(0,d.jsx)("rect",{y:"451",width:"555",height:"49",rx:"24.5",ry:"24.5",fill:"#39b54a"}),(0,d.jsx)("text",{x:"1.035553",y:"109.1985",fill:"#fff",children:(0,d.jsx)("tspan",{x:"241.43555",y:"480.19852",children:"render()"})})]})}),(0,d.jsx)("g",{children:(0,d.jsxs)(c.default,{to:"#connectedcallback",className:i.pathInit+" "+i.pathAttached,children:[(0,d.jsx)("rect",{x:"65",y:"89",width:"275",height:"49",rx:"24.5",ry:"24.5",fill:"#4b516e"}),(0,d.jsx)("text",{x:"78.77652",y:"26.198486",fill:"#fff",children:(0,d.jsx)("tspan",{x:"117.17651",y:"118.19849",children:"connectedCallback()"})})]})}),(0,d.jsx)("g",{children:(0,d.jsxs)(c.default,{to:"#componentshouldupdate",className:i.pathUpdate,children:[(0,d.jsx)("rect",{x:"303",y:"233",width:"252",height:"49",rx:"24.5",ry:"24.5",fill:"#7b83a6"}),(0,d.jsx)("text",{x:"-6.5288005",y:"2.8359385",fill:"#fff",children:(0,d.jsx)("tspan",{x:"325.57117",y:"261.83594",children:"componentShouldUpdate()"})})]})}),(0,d.jsx)("g",{children:(0,d.jsxs)(c.default,{to:"#componentwillrender",className:i.pathInit+" "+i.pathUpdate,children:[(0,d.jsx)("rect",{x:"77.5",y:"377",width:"400",height:"49",rx:"24.5",ry:"24.5",fill:"#4b516e"}),(0,d.jsx)("text",{x:"-148.97623",y:"146.83594",fill:"#fff",children:(0,d.jsx)("tspan",{x:"183.12378",y:"405.83594",children:"componentWillRender()"})})]})}),(0,d.jsx)("g",{children:(0,d.jsxs)(c.default,{to:"#componentwillupdate",className:i.pathUpdate,children:[(0,d.jsx)("rect",{x:"303",y:"305",width:"252",height:"49",rx:"24.5",ry:"24.5",fill:"#7b83a6"}),(0,d.jsx)("text",{x:"2.5237732",y:"74.835938",fill:"#fff",children:(0,d.jsx)("tspan",{x:"334.62378",y:"333.83594",children:"componentWillUpdate()"})})]})}),(0,d.jsx)("g",{children:(0,d.jsxs)(c.default,{to:"#componentdidrender",className:i.pathInit+" "+i.pathUpdate,children:[(0,d.jsx)("rect",{x:"77.5",y:"523",width:"400",height:"49",rx:"24.5",ry:"24.5",fill:"#4b516e"}),(0,d.jsx)("text",{x:"-144.44986",y:"292.83597",fill:"#fff",children:(0,d.jsx)("tspan",{x:"187.65015",y:"551.83594",children:"componentDidRender()"})})]})}),(0,d.jsx)("g",{children:(0,d.jsxs)(c.default,{to:"#componentwillload",className:i.pathInit,children:[(0,d.jsx)("rect",{y:"161",width:"252",height:"49",rx:"24.5",ry:"24.5",fill:"#212431"}),(0,d.jsx)("text",{x:"2.2765121",y:"97.835938",fill:"#fff",children:(0,d.jsx)("tspan",{x:"40.676514",y:"189.83594",children:"componentWillLoad()"})})]})})]}),(0,d.jsxs)("g",{fontSize:"14px",letterSpacing:"-.2",textAnchor:"middle",children:[(0,d.jsxs)("g",{className:"trigger path-init",onMouseOver:()=>n("init"),onMouseOut:()=>n("none"),children:[(0,d.jsx)("rect",{width:"190",height:"50",rx:"4",ry:"4",fill:"#fdf5e4"}
1),(0,d.jsx)("text",{x:"111.24316",y:"-1.0898438",fill:"#9a6400",children:(0,d.jsx)("tspan",{x:"95.239258",y:"28.910156",children:"Component initialized"})})]}),(0,d.jsxs)("g",{className:"trigger path-update",onMouseOver:()=>n("update"),onMouseOut:()=>n("none"),children:[(0,d.jsx)("rect",{x:"1",y:"718",width:"555",height:"50",rx:"4",ry:"4",fill:"#fdf5e4"}),(0,d.jsx)("text",{x:"344.75723",y:"166.90677",fill:"#9a6400",children:(0,d.jsx)("tspan",{x:"278.08643",y:"746.90674",children:"Change in a value of prop or state triggers rerender"})})]}),(0,d.jsxs)("g",{className:"trigger path-removed",onMouseOver:()=>n("removed"),onMouseOut:()=>n("none"),children:[(0,d.jsx)("rect",{x:"1",y:"779",width:"555",height:"50",rx:"4",ry:"4",fill:"#fdf5e4"}),(0,d.jsx)("text",{x:"138.02324",y:"167.91019",fill:"#9a6400",children:(0,d.jsx)("tspan",{x:"278.73926",y:"807.91016",children:"Component removed"})})]}),(0,d.jsxs)("g",{className:"trigger path-attached",onMouseOver:()=>n("attached"),onMouseOut:()=>n("none"),children:[(0,d.jsx)("rect",{x:"215",width:"190",height:"50",rx:"4",ry:"4",fill:"#fdf5e4"}),(0,d.jsx)("text",{x:"330.85489",y:"-1.0898438",fill:"#9a6400",children:(0,d.jsx)("tspan",{x:"310.23926",y:"28.910156",children:"Component reattached"})})]})]})]})})})})}},28453:(e,n,t)=>{t.d(n,{R:()=>d,x:()=>l});var o=t(96540);const c={},i=o.createContext(c);function d(e){const n=o.useContext(i);return o.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(c):e.components||c:d(e.components),o.createElement(i.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.