25:["$","title",null,{"children":"React Hooks: useState() | webgl | Observable"}] 49:[] 29:{"id":"04efdfcea9a564ab","slug":null,"title":"React Hooks: useState()","thumbnail":"f607036b4832f43d4856d7514dc399d2c2856fa0e19aacc4be900a5f37b2bcd8","access_level":"public","create_time":"$D2023-11-16T01:19:12.953Z","update_time":"$D2023-11-16T01:19:12.953Z","view_time":null,"first_public_time":"$D2023-11-16T01:19:12.953Z","has_unpublished_edits":null,"fork":{"id":"175f425a1b537eab","slug":"react-hooks-usestate","title":"React Hooks: useState()","owner":{"id":"2c4ecf3d0f76ad2f","login":"jgrunik","name":"Josh"}},"stars":0,"starred":false,"owner":{"type":"team","id":"200d7ac410def1a7","login":"webgl","name":"webgl","avatar_url":"https://avatars-next.observableusercontent.com/d71cc41559fbfdbcac9845583356ef7dfe0534205234b0088ffd324f0b878023","tier":"starter_2024","bio":"","following":false},"version":258,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e134ce8d8d6e6cb3","login":"webgl","name":"webgl","avatar_url":"https://avatars-next.observableusercontent.com/d71cc41559fbfdbcac9845583356ef7dfe0534205234b0088ffd324f0b878023","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"e134ce8d8d6e6cb3","login":"webgl","name":"webgl","avatar_url":"https://avatars-next.observableusercontent.com/d71cc41559fbfdbcac9845583356ef7dfe0534205234b0088ffd324f0b878023","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"React Hooks: useState()","cells":[{"id":0,"value":"# React Hooks: `useState()`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"youtubePlayer(\"9xhKH43llhU\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"## Multiple `useState()`'s","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"React.render(htm`<${AppMultiple}/>`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"AppMultiple = () => {\n const [count, setCount] = useState(10);\n const [count2, setCount2] = useState(20);\n\n const increment = (c) => c + 1;\n\n const onClick = () => {\n setCount(increment);\n setCount2(increment);\n };\n\n return htm`\n

\n \n

count1: ${count}

count2: ${count2}

\n \n

count1: ${count}

count2: ${count2}

\n \n \n

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"useForm = (initialValues) => {\n const [values, setValues] = useState(initialValues);\n\n const handleChange = ({ target: { name, value } }) =>\n setValues({ ...values, [name]: value });\n\n return [values, handleChange];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"## Custom Hook: `useLocalStorage()`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"React.render(htm`<${AppLocalStorage}/>`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"AppLocalStorage = () => {\n const [number, setNumber] = useLocalStorage(\"persistent number\", 0);\n\n return htm`\n

persistent number: ${number}

\n \n \n

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"useLocalStorage = (key, initialValue) => {\n const [storedValue, setStoredValue] = useState(() => {\n const item = localStorage.getItem(key);\n return item === undefined ? initialValue : JSON.parse(item);\n });\n\n const setValue = (value) => {\n value = value instanceof Function ? value(storedValue) : value;\n setStoredValue(value);\n localStorage.setItem(key, JSON.stringify(value));\n };\n\n return [storedValue, setValue];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"useState = React.useState","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import { React, htm } from \"@hastebrot/react@356\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"import { youtubePlayer } from \"@radames/youtube-player-api\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"1"}} 24:null