diff --git a/snippet_data/snippetList.json b/snippet_data/snippetList.json
index c851b0268..333cc26e1 100644
--- a/snippet_data/snippetList.json
+++ b/snippet_data/snippetList.json
@@ -497,6 +497,24 @@
         "hash": "2a5dbbdb2da60c42a738211e43997f45fe416f4cb069fbb53b1369549f446319"
       }
     },
+    {
+      "id": "useSSR",
+      "type": "snippetListing",
+      "title": "useSSR",
+      "attributes": {
+        "text": "A hook that checks if the code is running on the browser or the server.\n\n- Create a custom hook that returns an appropriate object.\n- Use `typeof window`, `window.document` and `window.document.createElement` to check if the code is running on the browser.\n- Use the `React.useState()` hook to define the `inBrowser` state variable.\n- Use the `React.useEffect()` hook to update the `inBrowser` state variable and clean up at the end.\n- Use the `React.useMemo()` to memoize the return values of the custom hook.\n\n",
+        "tags": [
+          "hooks",
+          "effect",
+          "state",
+          "memo",
+          "intermediate"
+        ]
+      },
+      "meta": {
+        "hash": "907a0a4dabb96a5e7e418e475e0b17a5d400ce796df768589e08316d3b8a4e88"
+      }
+    },
     {
       "id": "useTimeout",
       "type": "snippetListing",
diff --git a/snippet_data/snippets.json b/snippet_data/snippets.json
index c4bc2f8fc..abaed0aac 100644
--- a/snippet_data/snippets.json
+++ b/snippet_data/snippets.json
@@ -677,6 +677,30 @@
         "hash": "2a5dbbdb2da60c42a738211e43997f45fe416f4cb069fbb53b1369549f446319"
       }
     },
+    {
+      "id": "useSSR",
+      "title": "useSSR",
+      "type": "snippet",
+      "attributes": {
+        "fileName": "useSSR.md",
+        "text": "A hook that checks if the code is running on the browser or the server.\n\n- Create a custom hook that returns an appropriate object.\n- Use `typeof window`, `window.document` and `window.document.createElement` to check if the code is running on the browser.\n- Use the `React.useState()` hook to define the `inBrowser` state variable.\n- Use the `React.useEffect()` hook to update the `inBrowser` state variable and clean up at the end.\n- Use the `React.useMemo()` to memoize the return values of the custom hook.\n\n",
+        "codeBlocks": {
+          "style": "",
+          "code": "const isDOMavailable = !!(\n  typeof window !== 'undefined' &&\n  window.document &&\n  window.document.createElement\n);\n\nconst useSSR = (callback, delay) => {\n  const [inBrowser, setInBrowser] = React.useState(isDOMavailable);\n\n  React.useEffect(() => {\n    setInBrowser(isDOMavailable);\n    return () => {\n      setInBrowser(false);\n    }\n  }, []);\n\n  const useSSRObject = React.useMemo(() => ({\n    isBrowser: inBrowser,\n    isServer: !inBrowser,\n    canUseWorkers: typeof Worker !== 'undefined',\n    canUseEventListeners: inBrowser && !!window.addEventListener,\n    canUseViewport: inBrowser && !!window.screen\n  }), [inBrowser]);\n\n  return React.useMemo(() => Object.assign(Object.values(useSSRObject), useSSRObject), [inBrowser]);\n};\n\nconst SSRChecker = props => {\n  let { isBrowser, isServer } = useSSR();\n\n  return <p>{ isBrowser ? 'Running on browser' : 'Running on server' }</p>;\n};",
+          "example": "const SSRChecker = props => {\n  let { isBrowser, isServer } = useSSR();\n\n  return <p>{ isBrowser ? 'Running on browser' : 'Running on server' }</p>;\n};\n\nReactDOM.render(<SSRChecker />, document.getElementById('root'));"
+        },
+        "tags": [
+          "hooks",
+          "effect",
+          "state",
+          "memo",
+          "intermediate"
+        ]
+      },
+      "meta": {
+        "hash": "907a0a4dabb96a5e7e418e475e0b17a5d400ce796df768589e08316d3b8a4e88"
+      }
+    },
     {
       "id": "useTimeout",
       "title": "useTimeout",