2b:null 2c:["$","title",null,{"children":"React Error Boundary Hook | Jed Fox | Observable"}] 31:[] 2f:{"id":"b21a867e80da0a00","slug":null,"title":"React Error Boundary Hook","thumbnail":"b6c2a1e041b6729329f87197c6fb16d3f627ee3aec351434e74094a8d36f3bad","access_level":"unlisted","create_time":"$D2019-11-07T00:17:20.262Z","update_time":"$D2019-11-07T14:57:06.251Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"d2030a8eee317bb7","login":"j-f1","name":"Jed Fox","avatar_url":"https://avatars-next.observableusercontent.com/d222a344a2bdf162a8495aa976e7c08179a554665edaa137ea155ef6bb38fc37","tier":"starter_2024","bio":""},"version":83,"publish_version":83,"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,"bio":""}],"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":0,"collection":{"id":"56cf7467c8a68652","slug":"react","title":"React","owner":{"id":"d2030a8eee317bb7","login":"j-f1","name":"Jed Fox"}},"type":"notebook","body":{"titling":"auto","title":"React Error Boundary Hook","cells":[{"id":64,"value":"md`\n# React Error Boundary Hook\n\n[Return to the GitHub issue](https://github.com/reactjs/rfcs/pull/126#issuecomment-550566621)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"render(() => jsx`<${App} />`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"App = component(() => {\n const [error, setError] = useState();\n const [info, setInfo] = useState();\n\n const ErrorBoundary = useErrorBoundary((error, info) => {\n setError(error);\n setInfo(info);\n });\n\n const [checked, setChecked] = useState(false);\n\n const checkbox = jsx`\n \n Checkbox${' '}\n setChecked(c => !c)} />\n
\n \n `;\n\n if (error) {\n return jsx`\n

\n ${checkbox}\n \n

\n          ${error.message}\n          ${info.componentStack}\n

\n `;\n }\n\n return jsx`\n

\n ${checkbox}\n <${ErrorBoundary}>\n <${Content} />\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":33,"value":"Content = component(() => {\n const [throws, setThrows] = useState(false);\n if (throws) throw new Error('oops!');\n return jsx`\n \n `;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"function useErrorBoundary(handler) {\n // use a ref instead of recreating the component on every render\n const componentRef = useRef();\n // ref the handler so the latest one is always called,\n // with access to the current props and state.\n const handlerRef = useRef();\n handlerRef.current = handler;\n if (!componentRef.current) {\n componentRef.current = class ErrorBoundary extends React.Component {\n componentDidCatch(...args) {\n // pass the args directly to the error handler\n handlerRef.current(...args);\n }\n // required to suppress a warning from React\n static getDerivedStateFromError(err) {\n return { err };\n }\n render() {\n return this.props.children;\n }\n };\n }\n return componentRef.current;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"dev = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"import { jsx, render, component, useState, useRef, React } with {\n dev\n} from '@j-f1/react-16'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 30:"$2f:body"