WebReflection · April 30, 2022 04:14 · Jan 7, 2021 · Oct 30, 2020 · Oct 29, 2020 · Oct 29, 2020
diff --git a/useSWR.md b/useSWR.md
@@ -56,7 +56,7 @@ const useSWR = (path, fetcher, cache) => {
 
 ## Which libarry can use this hook?
 
-At least [any of my libarries](https://gist.github.com/WebReflection/761052d6dae7c8207d2fcba7cdede295) based on [augmentor](https://github.com/WebReflection/augmentor#readme).
+At least [any of my libarries](https://gist.github.com/WebReflection/761052d6dae7c8207d2fcba7cdede295) based on [uhooks](https://github.com/WebReflection/uhooks#readme).
 
 ```js
 import {Component, html, useState} from 'uland';

diff --git a/useSWR.md b/useSWR.md
@@ -64,9 +64,9 @@ import {Component, html, useState} from 'uland';
 const fetcher = url => fetch(url).then(r => r.json());
 
 const Profile = Component(() => {
-  const { data, error } = useSWR('/api/user', fetcher);
+  const {data, error} = useSWR(url, fetcher);
   if (error) return html`<div>failed to load</div>`;
-  if (!data) return html`<div>loading...</div>';
+  if (!data) return html`<div>loading...</div>`;
   return html`<div>hello {data.name}!</div>`;
 });
 ```

diff --git a/useSWR.md b/useSWR.md
@@ -70,3 +70,5 @@ const Profile = Component(() => {
   return html`<div>hello {data.name}!</div>`;
 });
 ```
+
+You can find a [Codepen uland example](https://codepen.io/WebReflection/pen/MWeVKyo?editors=0010) using this pattern.
diff --git a/useSWR.md b/useSWR.md
@@ -0,0 +1,72 @@
+# What's SWR?
+
+It's [React Hooks for Remote Data Fetching](https://github.com/vercel/swr#readme), a hook designed to render data on demand.
+
+```js
+import useSWR from 'swr'
+
+function Profile() {
+  const { data, error } = useSWR('/api/user', fetcher);
+
+  if (error) return <div>failed to load</div>;
+  if (!data) return <div>loading...</div>;
+  return <div>hello {data.name}!</div>;
+}
+```
+
+## OK cool, how can I have it outside React?
+
+Well, you need a hook, and this is the most basic one for one-off visualization:
+
+```js
+const swr = new Set;
+
+const useSWR = (path, fetcher) => {
+  let [data, update] = useState(null);
+  if (!swr.has(path)) {
+    fetcher(path).then(update, () => update(new Error(path)));
+    swr.add(path);
+  }
+  const isError = data instanceof Error;
+  return {
+    data: isError ? null : data,
+    error: isError ? data : null
+  };
+};
+```
+
+But this one allows cache invalidation, in case the time is right to re-fetch the data:
+
+```js
+const swr = new Map;
+
+const useSWR = (path, fetcher, cache) => {
+  let [data, update] = useState(null);
+  if (!swr.has(path) || swr.get(path) !== cache) {
+    fetcher(path).then(update, () => update(new Error(path)));
+    swr.set(path, cache);
+  }
+  const isError = data instanceof Error;
+  return {
+    data: isError ? null : data,
+    error: isError ? data : null
+  };
+};
+```
+
+## Which libarry can use this hook?
+
+At least [any of my libarries](https://gist.github.com/WebReflection/761052d6dae7c8207d2fcba7cdede295) based on [augmentor](https://github.com/WebReflection/augmentor#readme).
+
+```js
+import {Component, html, useState} from 'uland';
+
+const fetcher = url => fetch(url).then(r => r.json());
+
+const Profile = Component(() => {
+  const { data, error } = useSWR('/api/user', fetcher);
+  if (error) return html`<div>failed to load</div>`;
+  if (!data) return html`<div>loading...</div>';
+  return html`<div>hello {data.name}!</div>`;
+});
+```