31:T74b,{ const doc = md ` Consider the ticking clock example from [one of the previous sections](https://reactjs.org/docs/rendering-elements.html#updating-the-rendered-element). In [Rendering Elements](https://reactjs.org/docs/rendering-elements.html#rendering-an-element-into-the-dom), we have only learned one way to update the UI. We call \`ReactDOM.render()\` to change the rendered output: \`\`\`js function tick() { const element = (

Hello, world!

It is {new Date().toLocaleTimeString()}.

); ReactDOM.render( element, document.getElementById('root') ); } setInterval(tick, 1000); \`\`\` [**Try it on CodePen**](https://codepen.io/gaearon/pen/gwoJZk?editors=0010) In this section, we will learn how to make the \`Clock\` component truly reusable and encapsulated. It will set up its own timer and update itself every second. We can start by encapsulating how the clock looks: \`\`\`js function Clock(props) { return (

Hello, world!

It is {props.date.toLocaleTimeString()}.

); } function tick() { ReactDOM.render( , document.getElementById('root') ); } setInterval(tick, 1000); \`\`\` [**Try it on CodePen**](https://codepen.io/gaearon/pen/dpdoYR?editors=0010) However, it misses a crucial requirement: the fact that the \`Clock\` sets up a timer and updates the UI every second should be an implementation detail of the \`Clock\`. **Ideally we want to write this once and have the \`Clock\` update itself**: \`\`\`js ReactDOM.render( , document.getElementById('root') ); \`\`\` To implement this, we need to add “state” to the \`Clock\` component. State is similar to props, but it is private and fully controlled by the component.`; return hide_display(option1, doc); }32:T47e,{ const doc = md` You can convert a function component like \`Clock\` to a class in five steps: 1. Create an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes), with the same name, that extends \`React.Component\`. 2. Add a single empty method to it called \`render()\`. 3. Move the body of the function into the \`render()\` method. 4. Replace \`props\` with \`this.props\` in the \`render()\` body. 5. Delete the remaining empty function declaration. \`\`\`js class Clock extends React.Component { render() { return (

Hello, world!

It is {this.props.date.toLocaleTimeString()}.

); } } \`\`\` [**Try it on CodePen**](https://codepen.io/gaearon/pen/zKRGpo?editors=0010) \`Clock\` is now defined as a class rather than a function. The \`render\` method will be called each time an update happens, but as long as we render \`\` into the same DOM node, only a single instance of the \`Clock\` class will be used. This lets us use additional features such as local state and lifecycle methods.`; return hide_display(option2, doc) }33:T748,{ const doc = md` We will move the \`date\` from props to state in three steps: 1. Replace \`this.props.date\` with \`this.state.date\` in the \`render()\` method: \`\`\`js class Clock extends React.Component { render() { return (

Hello, world!

It is {this.state.date.toLocaleTimeString()}.

); } } \`\`\` 1. Add a [class constructor](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes#Constructor) that assigns the initial \`this.state\`: \`\`\`js class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return (

Hello, world!

It is {this.state.date.toLocaleTimeString()}.

); } } \`\`\` Note how we pass \`props\` to the base constructor: \`\`\`js constructor(props) { super(props); this.state = {date: new Date()}; } \`\`\` Class components should always call the base constructor with \`props\`. 1. Remove the \`date\` prop from the \`\` element: \`\`\`js ReactDOM.render( , document.getElementById('root') ); \`\`\` We will later add the timer code back to the component itself. The result looks like this: \`\`\`js class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return (

Hello, world!

It is {this.state.date.toLocaleTimeString()}.

); } } ReactDOM.render( , document.getElementById('root') ); \`\`\` [**Try it on CodePen**](https://codepen.io/gaearon/pen/KgQpJd?editors=0010) Next, we’ll make the \`Clock\` set up its own timer and update itself every second. `; return hide_display(option3, doc); }34:T1076,{ const doc = md` In applications with many components, it’s very important to free up resources taken by the components when they are destroyed. We want to [set up a timer](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) whenever the \`Clock\` is rendered to the DOM for the first time. This is called “mounting” in React. We also want to [clear that timer](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval) whenever the DOM produced by the \`Clock\` is removed. This is called “unmounting” in React. We can declare special methods on the component class to run some code when a component mounts and unmounts: \`\`\`js class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { } componentWillUnmount() { } render() { return (

Hello, world!

It is {this.state.date.toLocaleTimeString()}.

); } } \`\`\` These methods are called “lifecycle methods”. The \`componentDidMount()\` method runs after the component output has been rendered to the DOM. This is a good place to set up a timer: \`\`\`js componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } \`\`\` Note how we save the timer ID right on \`this\` (\`this.timerID\`). While \`this.props\` is set up by React itself and \`this.state\` has a special meaning, you are free to add additional fields to the class manually if you need to store something that doesn’t participate in the data flow (like a timer ID). We will tear down the timer in the \`componentWillUnmount()\` lifecycle method: \`\`\`js componentWillUnmount() { clearInterval(this.timerID); } \`\`\` Finally, we will implement a method called \`tick()\` that the \`Clock\` component will run every second. It will use \`this.setState()\` to schedule updates to the component local state: \`\`\`js class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ date: new Date() }); } render() { return (

Hello, world!

It is {this.state.date.toLocaleTimeString()}.

); } } ReactDOM.render( , document.getElementById('root') ); \`\`\` [**Try it on CodePen**](https://codepen.io/gaearon/pen/amqdNA?editors=0010) Now the clock ticks every second. Let’s quickly recap what’s going on and the order in which the methods are called: 1. When \`\` is passed to \`ReactDOM.render()\`, React calls the constructor of the \`Clock\` component. Since \`Clock\` needs to display the current time, it initializes \`this.state\` with an object including the current time. We will later update this state. 2. React then calls the \`Clock\` component’s \`render()\` method. This is how React learns what should be displayed on the screen. React then updates the DOM to match the \`Clock\`’s render output. 3. When the \`Clock\` output is inserted in the DOM, React calls the \`componentDidMount()\` lifecycle method. Inside it, the \`Clock\` component asks the browser to set up a timer to call the component’s \`tick()\` method once a second. 4. Every second the browser calls the \`tick()\` method. Inside it, the \`Clock\` component schedules a UI update by calling \`setState()\` with an object containing the current time. Thanks to the \`setState()\` call, React knows the state has changed, and calls the \`render()\` method again to learn what should be on the screen. This time, \`this.state.date\` in the \`render()\` method will be different, and so the render output will include the updated time. React updates the DOM accordingly. 5. If the \`Clock\` component is ever removed from the DOM, React calls the \`componentWillUnmount()\` lifecycle method so the timer is stopped. `; return hide_display(option4, doc); }35:T8fa,{ const doc = md` There are three things you should know about \`setState()\`. ### Do Not Modify State Directly For example, this will not re-render a component: \`\`\`js // Wrong this.state.comment = 'Hello'; \`\`\` Instead, use \`setState()\`: \`\`\`js // Correct this.setState({comment: 'Hello'}); \`\`\` The only place where you can assign \`this.state\` is the constructor. ### State Updates May Be Asynchronous React may batch multiple \`setState()\` calls into a single update for performance. Because \`this.props\` and \`this.state\` may be updated asynchronously, you should not rely on their values for calculating the next state. For example, this code may fail to update the counter: \`\`\`js // Wrong this.setState({ counter: this.state.counter + this.props.increment, }); \`\`\` To fix it, use a second form of \`setState()\` that accepts a function rather than an object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument: \`\`\`js // Correct this.setState((state, props) => ({ counter: state.counter + props.increment })); \`\`\` We used an [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) above, but it also works with regular functions: \`\`\`js // Correct this.setState(function(state, props) { return { counter: state.counter + props.increment }; }); \`\`\` ### State Updates are Merged When you call \`setState()\`, React merges the object you provide into the current state. For example, your state may contain several independent variables: \`\`\`js constructor(props) { super(props); this.state = { posts: [], comments: [] }; } \`\`\` Then you can update them independently with separate \`setState()\` calls: \`\`\`js componentDidMount() { fetchPosts().then(response => { this.setState({ posts: response.posts }); }); fetchComments().then(response => { this.setState({ comments: response.comments }); }); } \`\`\` The merging is shallow, so \`this.setState({comments})\` leaves \`this.state.posts\` intact, but completely replaces \`this.state.comments\`. `; return hide_display(option5, doc); }36:T81e,{ const doc = md` Neither parent nor child components can know if a certain component is stateful or stateless, and they shouldn’t care whether it is defined as a function or a class. This is why state is often called local or encapsulated. It is not accessible to any component other than the one that owns and sets it. A component may choose to pass its state down as props to its child components: \`\`\`js

It is {this.state.date.toLocaleTimeString()}.

\`\`\` This also works for user-defined components: \`\`\`js \`\`\` The \`FormattedDate\` component would receive the \`date\` in its props and wouldn’t know whether it came from the \`Clock\`’s state, from the \`Clock\`’s props, or was typed by hand: \`\`\`js function FormattedDate(props) { return

It is {props.date.toLocaleTimeString()}.

; } \`\`\` [**Try it on CodePen**](https://codepen.io/gaearon/pen/zKRqNB?editors=0010) This is commonly called a “top-down” or “unidirectional” data flow. Any state is always owned by some specific component, and any data or UI derived from that state can only affect components “below” them in the tree. If you imagine a component tree as a waterfall of props, each component’s state is like an additional water source that joins it at an arbitrary point but also flows down. To show that all components are truly isolated, we can create an \`App\` component that renders three \`\`s: \`\`\`js function App() { return (

); } ReactDOM.render( , document.getElementById('root') ); \`\`\` [**Try it on CodePen**](https://codepen.io/gaearon/pen/vXdGmd?editors=0010) Each \`Clock\` sets up its own timer and updates independently. In React apps, whether a component is stateful or stateless is considered an implementation detail of the component that may change over time. You can use stateless components inside stateful components, and vice versa. `; return hide_display(option6, doc); }37:T4bc,{ const root = html`

`; function FormattedDate(props) { return htm`

It is ${props.date.toLocaleTimeString()}.

`; } class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { // how to remove the Clock element? clearInterval(this.timerID); } tick() { this.setState({ date: new Date() }); } // FormattedDate(props) { // return htm`

It is ${props.date.toLocaleTimeString()}.

`; // } render() { return htm`

Hello, world!

<${FormattedDate} date=${this.state.date}/>

`; } } function App() { return htm`

<${Clock} /> <${Clock} /> <${Clock} />

`; } ReactDOM.render( htm`<${App} />`, root ); return root; }38:[] 2f:{"title":"State and Lifecycle","cells":[{"id":0,"value":"title = {\n\n addList(\"title\", \"state and lifecycle\", 1);\n \n return md`# State and Lifecycle\nhttps://reactjs.org/docs/state-and-lifecycle.html\n\nThis page introduces the concept of state and lifecycle in a React component. You can find a [detailed component API reference here](https://reactjs.org/docs/react-component.html).`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":293,"value":"md`## Table of Conent`","pinned":false,"hidden":false,"mode":"ojs"},{"id":289,"value":"toc = html`

\n ${d.id + \" =>\"}\n ${d.des}\n

` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"viewof option1 = DOM.select(none_doc);","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"{\n const root = html`

`;\n \n function tick() {\n const element = htm`\n

Hello, world!

It is ${new Date().toLocaleTimeString()}.

\n `;\n \n ReactDOM.render(\n element,\n root\n );\n }\n\n setInterval(tick, 1000);\n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"{\n const root = html`

`;\n \n function tick() {\n const element = htm`\n

Hello, world!

It is ${new Date().toLocaleTimeString()}.

\n `;\n \n ReactDOM.render(\n element,\n root\n );\n }\n \n while (true) {\n await Promises.tick(1000);\n tick();\n yield root;\n }\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"{\n const root = html`

`;\n \n function Clock(props) {\n return htm`\n

Hello, world!

It is ${props.date.toLocaleTimeString()}.

\n `;\n }\n\n function tick() {\n ReactDOM.render(\n htm`<${Clock} date=${new Date()} />`,\n root\n );\n }\n\n setInterval(tick, 1000);\n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"{\n const root = html`

`;\n \n function Clock(props) {\n return htm`\n

Hello, world!

It is ${props.date.toLocaleTimeString()}.

\n `;\n }\n \n function tick() {\n ReactDOM.render(\n htm`<${Clock} date=${new Date()} />`,\n root\n );\n }\n \n while (true) {\n await Promises.tick(1000);\n tick();\n yield root;\n }\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"func_class = {\n addList(\"func_class\", \"step 1: converting a function to a class\", 2);\n return md`## Converting a Function to a Class`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"viewof option2 = DOM.select(none_doc);","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"{\n const root = html`

`;\n \n class Clock extends React.Component {\n render(){\n return htm`\n

Hello, world!

It is ${this.props.date.toLocaleTimeString()}.

\n `;\n }\n }\n\n function tick() {\n ReactDOM.render(\n htm`<${Clock} date=${new Date()} />`,\n root\n );\n }\n\n setInterval(tick, 1000);\n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"{\n const root = html`

`;\n \n class Clock extends React.Component {\n render() {\n return htm`\n

Hello, world!

It is ${this.props.date.toLocaleTimeString()}.

\n `;\n }\n }\n \n function tick() {\n ReactDOM.render(\n htm`<${Clock} date=${new Date()} />`,\n root\n );\n }\n \n while (true) {\n await Promises.tick(1000);\n tick();\n yield root;\n }\n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"localState = {\n addList(\"localState\", \"Adding Local State to a Class\", 3);\n return md`\n## Adding Local State to a Class\nhttps://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class\n`\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":200,"value":"viewof option3 = DOM.select(none_doc);","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"{\n const root = html`

`;\n \n class Clock extends React.Component {\n constructor(props) {\n super(props);\n this.state = {date: new Date()};\n }\n\n render() {\n return htm`\n

Hello, world!

It is ${this.state.date.toLocaleTimeString()}.

\n `;\n }\n }\n\n ReactDOM.render(\n htm`<${Clock} />`,\n root\n );\n \n return root;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":211,"value":"lifecycle = {\n addList(\"lifecycle\", \"adding lifecycle methods to a class\", 4);\n return md`\n## Adding Lifecycle Methods to a Class\nhttps://reactjs.org/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class\n`;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"viewof option4 = DOM.select(none_doc);","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"{\n const root = html`

`;\n \n class Clock extends React.Component {\n constructor(props) {\n super(props);\n this.state = {date: new Date()};\n }\n\n componentDidMount() {\n this.timerID = setInterval(\n () => this.tick(),\n 1000\n );\n }\n\n componentWillUnmount() { // how to remove the Clock element?\n clearInterval(this.timerID);\n }\n\n tick() {\n this.setState({\n date: new Date()\n });\n }\n\n render() {\n return htm`\n

Hello, world!

It is ${this.state.date.toLocaleTimeString()}.

\n `;\n }\n }\n\n ReactDOM.render( \n htm`<${Clock} />`,\n root\n );\n \n return root; \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"useState = {\n addList(\"useState\", \"using state correctly\", 5);\n return md`\n## Using State Correctly\nhttps://reactjs.org/docs/state-and-lifecycle.html#using-state-correctly\n`;\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"viewof option5 = DOM.select(none_doc);","pinned":true,"hidden":false,"mode":"ojs"},{"id":226,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":237,"value":"flowDown = {\n addList(\"flowDown\", \"The data flows down\", 6);\n return md`\n## The Data Flows Down\nhttps://reactjs.org/docs/state-and-lifecycle.html#the-data-flows-down\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"viewof option6 = DOM.select(none_doc);","pinned":true,"hidden":false,"mode":"ojs"},{"id":236,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"utils = {\n addList(\"utils\", \"libs and methods required\", 7); \n return md`---\n## Utils`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"mutable list = [];","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"// toc = html`

\n// ${d.id + \" =>\"}\n// ${d.des}\n//

` ","pinned":true,"hidden":false,"mode":"ojs"},{"id":51,"value":"html`\n \n ${d3.schemeCategory10.map((color, i) => html`\n \n \n \n `)}\n

#	Color	Swatch
${i}	${color}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":144,"value":"function addList(id, des, idx) {\n let list = mutable list;\n // todo: make sure no replicate of id\n list.push({id: id, des: des, idx: idx});\n mutable list = list;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"import {html, svg} from \"@observablehq/htl\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"import {React, ReactDOM, htm, none_doc, hide_display} from \"@embracelife/tutorial-utilities\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"value":"md`## How to use pure.io`","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":191,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"require(\"https://unpkg.com/purecss@1.0.1/build/pure-min.css\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}