28:null 29:["$","title",null,{"children":"React with Experimental Features | Jed Fox | Observable"}] 2e:T546,render = (render, keyOrElement) => __SECRET_INTERNALS("elements", String(render), keyOrElement, { init: (state) => { // updated from original notebook. Rest of code is unchanged. const element = DOM.element("div"); return { renderer: () => state.render(state.public), id: __SECRET_CREATE_ID(), element, // updated from original notebook. Rest of code is unchanged. root: ReactDOM.createRoot(element), public: { useSetter: (setterOrValue, deps) => typeof setterOrValue === "function" ? useEffect( () => state.public.setValue( setterOrValue(state.public.getValue()) ), deps ) : useEffect(() => state.public.setValue(setterOrValue), [ setterOrValue ]), getValue: () => state.element.value, setValue: (value) => { state.element.value = value; state.element.dispatchEvent(new CustomEvent("input")); } } }; }, update: { render }, // updated from original notebook. Rest of code is unchanged. effect: (state) => state.root.render(createElement(state.renderer)), return: (state) => state.element })2f:[] 2c:{"id":"d222bff1df5a643f","slug":"react-experimental","title":"React with Experimental Features","thumbnail":"64aa555e0a1f46bc3225cfdb5846c99ee7b1b2023a0ac51c92462ffdf5d82a29","access_level":"public","create_time":"$D2019-11-01T16:26:54.405Z","update_time":"$D2021-09-16T16:31:36.228Z","view_time":null,"first_public_time":"$D2019-11-01T20:29:31.853Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"d2030a8eee317bb7","login":"j-f1","name":"Jed Fox","avatar_url":"https://avatars-next.observableusercontent.com/d222a344a2bdf162a8495aa976e7c08179a554665edaa137ea155ef6bb38fc37","tier":"starter_2024"},"version":242,"publish_version":242,"role":null,"authored":false,"authors":[{"type":"individual","id":"6a6723dba070655c","login":"j-f1","name":"Jed Fox","avatar_url":"https://avatars-next.observableusercontent.com/d222a344a2bdf162a8495aa976e7c08179a554665edaa137ea155ef6bb38fc37","tier":null}],"members":[{"type":"individual","id":"6a6723dba070655c","login":"j-f1","name":"Jed Fox","avatar_url":"https://avatars-next.observableusercontent.com/d222a344a2bdf162a8495aa976e7c08179a554665edaa137ea155ef6bb38fc37","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"56cf7467c8a68652","slug":"react","title":"React","owner":{"id":"d2030a8eee317bb7","login":"j-f1","name":"Jed Fox"}},"type":"notebook","body":{"title":"React with Experimental Features","cells":[{"id":0,"value":"md`\n# React with Experimental Features\n\nMy [React notebook](https://observablehq.com/@j-f1/react), except updated to use the preview version of React. As of this writing, the only experimental feature is Concurrent Mode.\n\nFrom [the docs](https://reactjs.org/docs/concurrent-mode-reference.html):\n> **Note: This is a Community Preview and not the final stable version. There will likely be future changes to these APIs. Use at your own risk!**\n\n${__SECRET_SWITCHER('@j-f1/react-experimental')}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"md`## Example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"viewof reset = html``;\n\n let resolved = false;\n const answer = 42;\n let resolve;\n let promise = new Promise(r => (resolve = r));\n\n const view = html`

demoAnswerResource = ${loadButton}`;\n\n  loadButton.addEventListener('click', () => {\n    view.querySelector('.content').innerHTML =\n      '42';\n    resolved = true;\n    resolve(answer);\n  });\n\n  view.value = {\n    read() {\n      if (resolved) {\n        return answer;\n      } else {\n        throw promise;\n      }\n    }\n  };\n\n  return view;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"render(\n  () => jsx`\n    <${Suspense} fallback=${jsx`Waiting to compute the answer`}>\n      <${DemoAnswer} />\n    \n  `\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"DemoAnswer = component(() => jsx`${demoAnswerResource.read()}`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"md`Suspense-enabled \\`render\\` function, adapted from the one in the parent notebook:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md`\n## Overrides\n*See [the original React notebook](https://observablehq.com/@j-f1/react#versionRangeDoc) for more on these.*\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"versionRange = \"experimental\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"dev = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`## Re-exports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"viewof SuspenseList = __SECRET_CONCURRENT_MODE_DOC('SuspenseList')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"viewof useTransition = __SECRET_CONCURRENT_MODE_DOC('useTransition')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"viewof useDeferredValue = __SECRET_CONCURRENT_MODE_DOC('useDeferredValue')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"viewof startTransition = __SECRET_DOC(\n  \"https://github.com/reactwg/react-18/discussions/41\",\n  \"startTransition\",\n  React.startTransition\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"React","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import {\n  // Notebook APIs\n  component,\n  memo,\n  forwardRef,\n  // Imports\n  jsx,\n  React,\n  ReactDOM,\n  // React\n  createElement,\n  Children,\n  createRef,\n  createContext,\n  lazy,\n  Fragment,\n  StrictMode,\n  Suspense,\n  cloneElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useImperativeHandle,\n  useLayoutEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n  useDebugValue,\n  // React DOM\n  createPortal,\n  // private APIs\n  __SECRET_INTERNALS,\n  __SECRET_CREATE_ID,\n  __SECRET_DOC,\n  __SECRET_SWITCHER\n} with { dev, versionRange } from '@j-f1/react'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"md`## Support code\\n*Nothing to see here*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"__SECRET_CONCURRENT_MODE_DOC = (name) =>\n  __SECRET_DOC(\n    \"https://reactjs.org/docs/concurrent-mode-reference.html#\" +\n      name.toLowerCase(),\n    name,\n    React[name]\n  )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}}
2d:"$2c:body"