Merge pull request #97 from jeetiss/use-constant

Reduce object creation by useConstant

Author: Brooooooklyn

package.json

@@ -56,7 +56,8 @@
     "webpack-dev-server": "^3.9.0"
   },
   "dependencies": {
-    "tslib": "^1.10.0"
+    "tslib": "^1.10.0",
+    "use-constant": "^1.0.0"
   },
   "lint-staged": {
     "*.js": [

src/use-event-callback.ts

@@ -1,4 +1,5 @@
 import { useEffect, useState, useCallback } from 'react'
+import useConstant from 'use-constant'
 import { Observable, BehaviorSubject, Subject } from 'rxjs'
 
 import { RestrictArray, VoidAsNull, Not } from './type'
@@ -7,11 +8,11 @@ export type VoidableEventCallback<EventValue> = EventValue extends void ? () =>
 
 export type EventCallbackState<EventValue, State, Inputs = void> = [
   VoidableEventCallback<EventValue>,
-  [State extends void ? null : State, BehaviorSubject<State | null>, BehaviorSubject<RestrictArray<Inputs> | null>]
+  [State extends void ? null : State, BehaviorSubject<State | null>, BehaviorSubject<RestrictArray<Inputs> | null>],
 ]
 export type ReturnedState<EventValue, State, Inputs> = [
   EventCallbackState<EventValue, State, Inputs>[0],
-  EventCallbackState<EventValue, State, Inputs>[1][0]
+  EventCallbackState<EventValue, State, Inputs>[1][0],
 ]
 
 export type EventCallback<EventValue, State, Inputs> = Not<
@@ -43,16 +44,17 @@ export function useEventCallback<EventValue, State = void, Inputs = void>(
   inputs?: RestrictArray<Inputs>,
 ): ReturnedState<EventValue, State | null, Inputs> {
   const initialValue = (typeof initialState !== 'undefined' ? initialState : null) as VoidAsNull<State>
-  const inputSubject$ = new BehaviorSubject<RestrictArray<Inputs> | null>(typeof inputs === 'undefined' ? null : inputs)
-  const stateSubject$ = new BehaviorSubject<State | null>(initialValue)
   const [state, setState] = useState(initialValue)
-  const [event$] = useState(new Subject<EventValue>())
+  const event$ = useConstant(() => new Subject<EventValue>())
+  const state$ = useConstant(() => new BehaviorSubject<State | null>(initialValue))
+  const inputs$ = useConstant(
+    () => new BehaviorSubject<RestrictArray<Inputs> | null>(typeof inputs === 'undefined' ? null : inputs),
+  )
+
   function eventCallback(e: EventValue) {
     return event$.next(e)
   }
   const returnedCallback = useCallback(eventCallback, [])
-  const [state$] = useState(stateSubject$)
-  const [inputs$] = useState(inputSubject$)
 
   useEffect(() => {
     inputs$.next(inputs!)

src/use-observable.ts

@@ -1,5 +1,6 @@
 import { Observable, BehaviorSubject } from 'rxjs'
-import { useState, useEffect, useMemo } from 'react'
+import { useState, useEffect } from 'react'
+import useConstant from 'use-constant'
 
 import { RestrictArray } from './type'
 
@@ -22,45 +23,35 @@ export function useObservable<State, Inputs extends ReadonlyArray<any>>(
 ): State | null {
   const [state, setState] = useState(typeof initialState !== 'undefined' ? initialState : null)
 
-  const { state$, inputs$ } = useMemo(() => {
-    const stateSubject$ = new BehaviorSubject<State | undefined>(initialState)
-    const inputSubject$ = new BehaviorSubject<RestrictArray<Inputs> | undefined>(inputs)
-
-    return {
-      state$: stateSubject$,
-      inputs$: inputSubject$,
-    }
-  }, [])
+  const state$ = useConstant(() => new BehaviorSubject<State | undefined>(initialState))
+  const inputs$ = useConstant(() => new BehaviorSubject<RestrictArray<Inputs> | undefined>(inputs))
 
   useEffect(() => {
     inputs$.next(inputs)
   }, inputs || [])
 
-  useEffect(
-    () => {
-      let output$: BehaviorSubject<State>
-      if (inputs) {
-        output$ = (inputFactory as (
-          inputs$: Observable<RestrictArray<Inputs> | undefined>,
-          state$: Observable<State | undefined>,
-        ) => Observable<State>)(inputs$, state$) as BehaviorSubject<State>
-      } else {
-        output$ = (inputFactory as (state$: Observable<State | undefined>) => Observable<State>)(
-          state$,
-        ) as BehaviorSubject<State>
-      }
-      const subscription = output$.subscribe((value) => {
-        state$.next(value)
-        setState(value)
-      })
-      return () => {
-        subscription.unsubscribe()
-        inputs$.complete()
-        state$.complete()
-      }
-    },
-    [], // immutable forever
-  )
+  useEffect(() => {
+    let output$: BehaviorSubject<State>
+    if (inputs) {
+      output$ = (inputFactory as (
+        inputs$: Observable<RestrictArray<Inputs> | undefined>,
+        state$: Observable<State | undefined>,
+      ) => Observable<State>)(inputs$, state$) as BehaviorSubject<State>
+    } else {
+      output$ = (inputFactory as (state$: Observable<State | undefined>) => Observable<State>)(
+        state$,
+      ) as BehaviorSubject<State>
+    }
+    const subscription = output$.subscribe((value) => {
+      state$.next(value)
+      setState(value)
+    })
+    return () => {
+      subscription.unsubscribe()
+      inputs$.complete()
+      state$.complete()
+    }
+  }, []) // immutable forever
 
   return state
 }

yarn.lock

@@ -7587,6 +7587,11 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-constant@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/use-constant/-/use-constant-1.0.0.tgz#cfab998e6fc19ddc62b056875709f1420e339a10"
+  integrity sha512-HmVrMl3+1tEr64ace4UtP5WTdnLyrvYKwF54JVf7B7lSB76JSERDvvgWkaaxlOM3S0dSl1U3WH1l9PupNnzsvQ==
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"