2b:null 2c:["$","title",null,{"children":"Adding State to React Components with State Hooks | Steve Oney | Observable"}] 31:T671,md` Here is a working version of the \`ClickTrackingButton\` component: \`\`\`JavaScript import { useState } from 'react'; export default function ClickTrackingButton(props) { const [clickCount, setClickCount] = useState(0); const buttonClicked = () => { setClickCount(clickCount+1); }; return } \`\`\` *Note: I'll leave it up to you to figure out how to make it say \`"Clicked 1 time"\` instead of \`"Clicked 1 times"\` when \`clickCount === 1\`.* The most important line here is: \`\`\`JavaScript const [clickCount, setClickCount] = useState(0); \`\`\` The \`useState()\` function creates a state variable. It accepts one argument, which is the initial value that state variable should have. It returns a two-item list, where the first item is the current value of that state variable (the first time we create our component, this will be the same as the initial value) and a "setter" function that we can call to change its value. In the code above, we use [destructring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) to se \`clickCount\` to be the current value and \`setClickCount\` as the "setter" function. We can call the "setter" function with one argument: the new value that we want our variable to have: \`\`\`JavaScript setClickCount(clickCount+1); \`\`\` --- There are some important [rules to follow](https://reactjs.org/docs/hooks-rules.html) when using hooks. Namely: 1. Do not use them inside of nested code blocks 2. Only call hooks in react function components `32:[{"id":"b2893c74ffcf8e13d4f1430d6b05ba8dc43d1ee1efb551fffedce98ab77de9444973a4ee42b6eae87be48e7fa32c05e3c156898c89349a4045d3652c11b8006b","href":"https://static.observableusercontent.com/files/b2893c74ffcf8e13d4f1430d6b05ba8dc43d1ee1efb551fffedce98ab77de9444973a4ee42b6eae87be48e7fa32c05e3c156898c89349a4045d3652c11b8006b","name":"microwave.jpg","type":"image/jpeg","lastModified":1616379159545.687,"size":164864}] 2f:{"id":"02fdfa9d1757f0cb","slug":"si-579-adding-state-to-react-components-with-state-hooks","title":"Adding State to React Components with State Hooks","thumbnail":"084aeece1cc1346eeda1da9e19a1fb9b7a2afae40fbb2d62edb458583f11d9c2","access_level":"public","create_time":"$D2021-03-21T20:41:11.197Z","update_time":"$D2023-10-02T17:43:46.369Z","view_time":null,"first_public_time":"$D2021-03-22T05:12:16.923Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"55b87b37da07de37","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":"starter_2024"},"version":116,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null}],"members":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"8fc582aae7c4b049","slug":"si-579","title":"Building Interactive Applications","owner":{"id":"55b87b37da07de37","login":"soney","name":"Steve Oney"}},"type":"notebook","body":{"title":"Adding State to React Components with State Hooks","cells":[{"id":0,"value":"md`# Adding State to React Components with State Hooks`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":112,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"md`\n## What is \"state\"?\n\nWhen we say we are adding **state** to our react components, we mean that we are giving our React components the ability to store data and change their behavior accordingly.\n\n

\n\nEven simple devices have states. For example, the \"state\" of a microwave would include:\n\n- Whether the door is open or closed\n- Whether the microwave is currently running\n- How much time is left on the timer\n- The power level\n- ...and potentially much more\n\nState also impacts behavior. For example, if a microwave door is open, it should never be running.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"md`\n## How NOT to track state\n\nBefore we go over how we *should* track state, let's talk about ways that we *should not* track state (because you may be tempted to use one of these approaches). Let's use an example of a button that tracks how many times it was clicked:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":27,"value":"md`\n### Do NOT use local variables\n\nThe function below **unsuccessfully** tries to implement click counting by using a local variable (\\`clickCount\\`) and incrementing it whenever the button is clicked.\n\n\\`\\`\\`JavaScript\nfunction ClickTrackingButton() {\n let clickCount = 0;\n const buttonClicked = () => {\n clickCount++;\n };\n return \n}\n\\`\\`\\`\n\nThe end result is a button that does not increment when clicked:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"md`\nWhy doesn't this work? Because:\n\n1. Every time React renders the \\`ClickTrackingButton\\` component, the \\`clickCount\\` variable gets reset to \\`0\\`\n2. Remember that React is a [framework](https://observablehq.com/@soney/si-579-understanding-libraries-vs-frameworks), essentially meaning that it chooses when and how to call your function component. React is going to try to minimize the computational load and will thus try to minimize the number of times it has to call your \\`ClickTrackingButton\\` function. It does **not** call it when we increment \\`clickCount\\`.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"md`\n### Do NOT use global variables\n\nYou might think we could slightly modify the code above to make \\`clickCount\\` a global variable:\n\n\\`\\`\\`JavaScript\nlet clickCount = 0;\n\nfunction ClickTrackingButton() {\n const buttonClicked = () => {\n clickCount++;\n };\n return \n}\n\\`\\`\\`\n\nHowever, the end result is still a button that does not increment when clicked:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":74,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":78,"value":"md`\nThis still doesn't work because:\n\n1. React still does not re-render your component when the user clicks the button (per point 2 above)\n2. Even if it did, this would be bad practice, as if we had two \\`\\` elements, both would share the same value for \\`clickCount\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"md`\n### Do NOT use attributes\n\nReact components allow us to pass in attributes (or \"properties\"). For example, in \\`\\`, we are passing in \\`name\\` as a prop to a \\`Greeting\\` component. However, it is important to distinguish between these attributes and the state of the \\`Greeting\\` component. Conceptually, you should think of the attributes that you pass in as \"permanent\" (they aren't necessarily but this is how they should essentially be used) whereas its state will change more dynamically.\n\nFor example, if we had a \\`Microwave\\` component (again, to represent a microwave), then its *attributes* would be permanent things about the microwave: its wattage, its size, whether it has a spinning plate, etc. Its *state* would be things that change as the user interacts with it (whether the door is open or closed, and the other state variables listed above).\n\nLest you be tempted to use attributes as state trackers, it does **not** work, as these properties are read-only.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":93,"value":"md`\n## Tracking State Using State Hooks\n\nThere are two \"correct\" ways to track state in React components (1) by using [class components](https://reactjs.org/docs/components-and-props.html) and (2) by using [state hooks](https://reactjs.org/docs/hooks-state.html). We are going to focus on (2): state hooks here.\n\n*Note: State hooks were not in react until 2019 (version 16.8) so don't be surprised if you see older StackOverflow posts or blogs saying that the only way to track state is with class components.*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"import {toc} from \"@harrystevens/toc\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"