Add useSSR snippet

snippets/useSSR.md

@@ -0,0 +1,57 @@
+---
+title: useSSR
+tags: hooks,effect,state,memo,intermediate
+---
+
+A hook that checks if the code is running on the browser or the server.
+
+- Create a custom hook that returns an appropriate object.
+- Use `typeof window`, `window.document` and `window.document.createElement` to check if the code is running on the browser.
+- Use the `React.useState()` hook to define the `inBrowser` state variable.
+- Use the `React.useEffect()` hook to update the `inBrowser` state variable and clean up at the end.
+- Use the `React.useMemo()` to memoize the return values of the custom hook.
+
+```jsx
+const isDOMavailable = !!(
+  typeof window !== 'undefined' &&
+  window.document &&
+  window.document.createElement
+);
+
+const useSSR = (callback, delay) => {
+  const [inBrowser, setInBrowser] = React.useState(isDOMavailable);
+
+  React.useEffect(() => {
+    setInBrowser(isDOMavailable);
+    return () => {
+      setInBrowser(false);
+    }
+  }, []);
+
+  const useSSRObject = React.useMemo(() => ({
+    isBrowser: inBrowser,
+    isServer: !inBrowser,
+    canUseWorkers: typeof Worker !== 'undefined',
+    canUseEventListeners: inBrowser && !!window.addEventListener,
+    canUseViewport: inBrowser && !!window.screen
+  }), [inBrowser]);
+
+  return React.useMemo(() => Object.assign(Object.values(useSSRObject), useSSRObject), [inBrowser]);
+};
+
+const SSRChecker = props => {
+  let { isBrowser, isServer } = useSSR();
+
+  return <p>{ isBrowser ? 'Running on browser' : 'Running on server' }</p>;
+};
+```
+
+```jsx
+const SSRChecker = props => {
+  let { isBrowser, isServer } = useSSR();
+
+  return <p>{ isBrowser ? 'Running on browser' : 'Running on server' }</p>;
+};
+
+ReactDOM.render(<SSRChecker />, document.getElementById('root'));
+```