Removed implicit use of iterators from internals

Author: patrickroberts

package.json

@@ -1,6 +1,6 @@
 {
   "name": "suspense-service",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "Suspense integration library for React",
   "repository": "github:patrickroberts/suspense-service",
   "main": "dst/cjs/suspense-service.js",

src/Service/Consumer/index.tsx

@@ -15,8 +15,10 @@ export function createServiceConsumer<TRequest, TResponse>(
 ): ServiceConsumer<TRequest, TResponse> {
   const ResourceConsumer: ServiceConsumer<TRequest, TResponse> = ({ id, children }) => {
     const render = useCallback((
-      [resource, setState]: [Resource<TResponse>, Dispatch<SetStateAction<TRequest>>],
+      resourceAndSetState: [Resource<TResponse>, Dispatch<SetStateAction<TRequest>>],
     ) => {
+      const resource = resourceAndSetState[0];
+      const setState = resourceAndSetState[1];
       const response = resource();
 
       return children(response, setState);

src/Service/Provider/index.tsx

@@ -1,4 +1,4 @@
-import React, { ComponentType, Dispatch, SetStateAction, Suspense, isValidElement, memo, useMemo } from 'react';
+import React, { ComponentType, Dispatch, SetStateAction, Suspense, memo, useMemo } from 'react';
 import Id from '../../IdContext/Id';
 import IdContext from '../../IdContext';
 import useResetState from '../../State/useResetState';
@@ -18,10 +18,12 @@ export function createServiceProvider<TRequest, TResponse>(
   const ResourceProvider: ServiceProvider<TRequest> = ({
     request, id, children, fallback, reset,
   }) => {
-    const [state, setState] = useResetState(request, reset);
+    const stateAndSetState = useResetState(request, reset);
+    const state = stateAndSetState[0];
+    const setState = stateAndSetState[1];
     const resource = useHandler(state, id);
     const element = useMemo(() => (
-      isValidElement(fallback)
+      fallback != null
         ? <Suspense fallback={fallback}>{children}</Suspense>
         : children
     ), [children, fallback]);

src/Service/index.ts

@@ -53,7 +53,9 @@ export function createService<TRequest, TResponse>(
 export function useServiceState<TRequest, TResponse>(
   service: Service<TRequest, TResponse>, id: Id = null,
 ): [TResponse, Dispatch<SetStateAction<TRequest>>] {
-  const [resource, setState] = useIdContext(service[kResource], id);
+  const resourceAndSetState = useIdContext(service[kResource], id);
+  const resource = resourceAndSetState[0];
+  const setState = resourceAndSetState[1];
   const response = resource();
 
   return [response, setState];
@@ -65,7 +67,5 @@ export function useServiceState<TRequest, TResponse>(
  * @param id the {@link ServiceProviderProps.id | ServiceProvider id} to use
  */
 export function useService<TResponse>(service: Service<any, TResponse>, id: Id = null): TResponse {
-  const [response] = useServiceState(service, id);
-
-  return response;
+  return useServiceState(service, id)[0];
 }

src/State/is.ts

@@ -2,6 +2,5 @@ import { DispatchWithoutAction, useReducer } from 'react';
 
 /** @ignore */
 export default function useForceUpdate(): DispatchWithoutAction {
-  const [, dispatch] = useReducer(() => ({}), {});
-  return dispatch;
+  return useReducer(() => ({}), {})[1];
 }

src/State/useForceUpdate.ts

@@ -1,19 +1,31 @@
 import { DependencyList, useRef } from 'react';
-import is from './is';
+
+const intialValue: [any, DependencyList | undefined] = [undefined, undefined];
+
+/** @ignore */
+function dependencyListIs(a: DependencyList | undefined, b: DependencyList | undefined): boolean {
+  if (!a || !b || a.length !== b.length) return false;
+
+  for (let i = 0; i < a.length; ++i) {
+    if (!Object.is(a[i], b[i])) return false;
+  }
+
+  return true;
+}
 
 /**
  * @ignore
  * An alternative to React useMemo that provides a semantic guarantee of referential stability.
+ * This allows synchronous effects to be invoked safely during the render phase.
  * @param factory The factory function to compute a referentially stable value
  * @param deps The dependencies of the computation
  */
 export default function useSync<T>(factory: () => T, deps: DependencyList | undefined): T {
-  const { current } = useRef<[T?, DependencyList?]>([]);
+  const ref = useRef<[T, DependencyList | undefined]>(intialValue);
 
-  if (!is(current[1], deps)) {
-    current[0] = factory();
-    current[1] = deps;
+  if (!dependencyListIs(ref.current[1], deps)) {
+    ref.current = [factory(), deps];
   }
 
-  return current[0]!;
+  return ref.current[0];
 }

src/State/useSync.ts

@@ -14,7 +14,12 @@ export function createStateContextConsumer<T>(
 ): StateContextConsumer<T> {
   const StateConsumer: StateContextConsumer<T> = ({ id, children }) => {
     const render = useCallback(
-      ([state, setState]: State<T>) => children(state, setState),
+      (stateAndSetState: State<T>) => {
+        const state = stateAndSetState[0];
+        const setState = stateAndSetState[1];
+
+        return children(state, setState);
+      },
       [children],
     );