28:null 29:["$","title",null,{"children":"React Hooks: useEffect() | Josh | Observable"}] 2e:[] 2c:{"id":"b49983acc89bb638","slug":"react-hooks-useeffect","title":"React Hooks: useEffect()","thumbnail":"12af98629ed064181c990ee68ed889f775bbafbdfa50f1249c8760425e32767b","access_level":"public","create_time":"$D2021-06-23T07:43:37.029Z","update_time":"$D2022-01-16T05:25:09.956Z","view_time":null,"first_public_time":"$D2021-12-12T10:06:15.476Z","has_unpublished_edits":null,"fork":{"id":"175f425a1b537eab","slug":"react-hooks-usestate","title":"React Hooks: useState()","owner":{"id":"2c4ecf3d0f76ad2f","login":"jgrunik","name":"Josh"}},"stars":2,"starred":false,"owner":{"type":"team","id":"2c4ecf3d0f76ad2f","login":"jgrunik","name":"Josh","avatar_url":"https://avatars-next.observableusercontent.com/2ab3bbb1ab8469b93dd5c389080bd4862c4414e21b87e08a09c78222f8aaabc0","tier":"starter_2024"},"version":595,"publish_version":595,"role":null,"authored":false,"authors":[{"type":"individual","id":"eadfff79374106cc","login":"jgrunik","name":"Josh","avatar_url":"https://avatars-next.observableusercontent.com/2ab3bbb1ab8469b93dd5c389080bd4862c4414e21b87e08a09c78222f8aaabc0","tier":null}],"members":[{"type":"individual","id":"eadfff79374106cc","login":"jgrunik","name":"Josh","avatar_url":"https://avatars-next.observableusercontent.com/2ab3bbb1ab8469b93dd5c389080bd4862c4414e21b87e08a09c78222f8aaabc0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"195a49e1ace67aea","slug":"react-hooks","title":"React Hooks","owner":{"id":"2c4ecf3d0f76ad2f","login":"jgrunik","name":"Josh"}},"type":"notebook","body":{"title":"React Hooks: useEffect()","cells":[{"id":0,"value":"# React Hooks: `useEffect()`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"youtubePlayer(\"j1ZRyw7OtZs\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"## Add & Remove Component","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"React.render(htm`<${AppHelloGoodbye}/>`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"AppHelloGoodbye = () => {\n const [showHello, setShowHello] = useState(true);\n const toggleShowHello = () => setShowHello(!showHello);\n\n return htm`\n

\n \n ${showHello && htm`<${HelloComponent}/>`}\n

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"HelloComponent = () => {\n useEffect(() => {\n console.log(\"hello\");\n return () => console.log(\"goodbye\");\n }, []);\n\n return htm`

Hello

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"## Add & Remove Event Listeners","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"React.render(htm`<${AppMouseMove}/>`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"AppMouseMove = () => {\n const [listenMouse, setListenMouse] = useState(false);\n const [mouseData, setMouseData] = useState();\n\n const toggleListenMouse = () => setListenMouse(!listenMouse);\n\n return htm`\n

\n \n ${listenMouse && htm`<${MouseMoveComponent}/>`}\n

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"MouseMoveComponent = () => {\n const [{ mouseX, mouseY }, setMouseOffset] = useState({\n mouseX: undefined,\n mouseY: undefined\n });\n\n useEffect(() => {\n const onMouseMove = ({ offsetX, offsetY }) => {\n console.log({ offsetX, offsetY });\n setMouseOffset({ mouseX: offsetX, mouseY: offsetY });\n };\n window.addEventListener(\"mousemove\", onMouseMove);\n return () => window.removeEventListener(\"mousemove\", onMouseMove);\n });\n\n return htm`

x:${mouseX}, y:${mouseY}

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"## Custom Hook: `useFetch()`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"React.render(htm`<${AppFetch}/>`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"AppFetch = () => {\n const [seed, setSeed] = useState(0);\n\n const { data, loading } = useFetch(`https://randomuser.me/api/?seed=${seed}`);\n\n const nameInfo = loading\n ? `loading ...`\n : JSON.stringify(data.results[0].name, undefined, 2);\n\n return htm`\n

seed: ${seed}

\n \n \n

${nameInfo}

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":408,"value":"useFetch = (url) => {\n const [state, setState] = useState({ data: null, loading: true });\n\n useEffect(() => {\n setState((state) => ({ data: state.data, loading: true }));\n fetch(url)\n .then((response) => response.json())\n .then((json) => setState({ data: json, loading: false }));\n }, [url, setState]);\n\n return state;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"useEffect = React.useEffect","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"useState = React.useState","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import { React, htm, styled } from \"@hastebrot/react@356\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"