{"version":"1.0","type":"rich","title":"Gist d2073de12ad1688c6348021a4943ffbd","description":"This example demonstrates the React component lifecycle for both parent and child components, showing the order of lifecycle method calls as a user types into an input field. The code defines a `ParentComponent` with an editable text input and a `ChildComponent` that receives the input text as a prop, logging every lifecycle event—from `getDefaultProps` and `getInitialState` through `componentWillMount`, `render`, `componentDidMount`, and update methods like `shouldComponentUpdate` and `componentDidUpdate`—to the console. It uses React’s `createClass` API and `render` from `react-dom` to mount the parent to the DOM. The visualization is a live console trace, not a graphical chart, exposing the exact sequence of lifecycle hooks during initial mount and prop-driven updates.","provider_name":"VizHub AI Studio","provider_url":"https://next.vizhub.com","html":"<iframe src=\"https://next.vizhub.com/viz/gist-d2073de12ad1688c6348021a4943ffbd?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}