Merge pull request #7 from kmoskwiak/feature/no-initial-state

Feature/no initial state

CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## 2.x.x
+
+### 2.0.x
+
+Initial state is no longer passed to hook. It will be always set to `null`.
+
+```js
+// before
+const [data, error] = useSSE(
+  { data: 'initial data' }
+  () => {
+    return fetch();
+  },
+  []
+);
+```
+
+```js
+// after
+const [data, error] = useSSE(() => {
+  return fetch();
+}, []);
+```
+
 ## 1.x.x
 
 ### 1.2.x

README.md

@@ -19,15 +19,9 @@ import React from "react";
 import { useSSE } from "use-sse";
 
 const MyComponent = () => {
-  const [data, error] = useSSE(
-    {
-      title: "my initial data",
-    },
-    () => {
-      return fetch("https://myapi.example.com").then((res) => res.json());
-    },
-    []
-  );
+  const [data, error] = useSSE(() => {
+    return fetch("https://myapi.example.com").then((res) => res.json());
+  }, []);
 
   return <div>{data.title}</div>;
 };
@@ -79,17 +73,16 @@ hydrate(
 
 ## API
 
-### useSSE hook
+### useSSE
 
 ```js
-const [data, error] = useSSE(initial, effect, dependencies);
+const [data, error] = useSSE(effect, dependencies);
 ```
 
 #### Params
 
 | param          | type                 | required | description                                              | example                                            |
 | -------------- | -------------------- | -------- | -------------------------------------------------------- | -------------------------------------------------- |
-| `initial`      | `any`                | true     | initial state                                            | `{}`                                               |
 | `effect`       | `() => Promise<any>` | true     | effect function returning promise which resolves to data | `() => fetch('example.com').then(res=>res.json())` |
 | `dependencies` | `any[]`              | false    | list of dependencies like in useEffect                   | []                                                 |
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "use-sse",
-  "version": "1.2.0",
+  "version": "2.0.0-beta.1",
   "description": "useSSE - use server-side effect",
   "main": "dist/useSSE.js",
   "repository": {

src/useSSE.tsx

@@ -31,20 +31,18 @@ declare global {
 
 /**
  *
- * @param initial initial value of state
  * @param effect runction returning promise
  * @param dependencies  list of dependencies like in useEffect
  */
 export function useSSE<T>(
-  initial: any,
   effect: () => Promise<any>,
   dependencies?: DependencyList
 ): T[] {
   const internalContext: IInternalContext = useContext(InternalContext);
   let callId = internalContext.current;
   internalContext.current++;
   const ctx: IDataContext = useContext(DataContext);
-  const [data, setData] = useState(ctx[callId]?.data || initial);
+  const [data, setData] = useState(ctx[callId]?.data || null);
   const [error, setError] = useState(ctx[callId]?.error || null);
 
   if (!internalContext.resolved) {

tests/useSSE.spec.tsx

@@ -18,27 +18,23 @@ describe("useSSE", () => {
     shouldResolveAfter: number = 0
   ) => {
     const CustomElement: FunctionComponent = () => {
-      const [data, error] = useSSE(
-        {},
-        () => {
-          return new Promise((resolve, reject) => {
-            if (shouldReject) {
-              return reject({
-                code: 401,
-                messgage: "Not authorized",
-              });
-            }
-            if (shouldResolveAfter) {
-              setTimeout(() => {
-                resolve({ data: "my custom data" });
-              }, shouldResolveAfter);
-            } else {
+      const [data, error] = useSSE(() => {
+        return new Promise((resolve, reject) => {
+          if (shouldReject) {
+            return reject({
+              code: 401,
+              messgage: "Not authorized",
+            });
+          }
+          if (shouldResolveAfter) {
+            setTimeout(() => {
               resolve({ data: "my custom data" });
-            }
-          });
-        },
-        []
-      );
+            }, shouldResolveAfter);
+          } else {
+            resolve({ data: "my custom data" });
+          }
+        });
+      }, []);
       check(data, error);
       return <div></div>;
     };