@webkrafters/react-observable-context 1.1.3 → 1.1.5

package/README.md

@@ -1,322 +1,324 @@
-# React-Observable-Context
-
-Observable react context - prevents an automatic total component tree re-rendering at context change.
-
-<h4><u>Install</u></h4>
-
-npm i -S @webkrafters/react-observable-context
-
-npm install --save @webkrafters/react-observable-context
-
-## API
-
-The React-Observable-Context package exports only **2** modules namely: the **createContext** method and the **Provider** component.
-
-`createContext` is a zero-parameter funtion returning a store-bearing context. Pass the context to the React::useContext() parameter to obtain the context's `store`.
-
-The `Provider` can immediately be used as-is anywhere the React-Observable-Context is required. It accepts **3** props and the customary Provider `children` prop. Supply the context to its `context` prop; the initial state to the customary Provider `value` prop; and the optional `prehooks` prop <i>(discussed in the prehooks section below)</i>.
-
-<i><u>Note:</u></i> the Provider `context` prop is not updateable. Once set, all further updates to this prop are ignored.
-
-The context's `store` exposes **4** methods for interacting with the context's internal state namely:
-
-* **getState**: (selector?: (state: State) => any) => any
-
-* **resetState**: VoidFunction // resets the state to the Provider latest `value` prop.
-
-* **setState**: (changes: PartialState\<State\>) => void
-
-* **subscribe**: (listener: (newValue: PartialState\<State\>, oldValue: PartialState\<State\>) => void) => ***UnsubscribeFunction***
-
-### Prehooks
-
-The context's store update operation adheres to **2** user supplied prehooks when present. Otherwise, the update operation proceeds normally to completion. They are named **resetState** and **setState** after the store update methods which utilize them.
-
-* **resetState**: (state: {current: State, original: State}) => boolean
-
-* **setState**: (newChanges: PartialState\<State\>) => boolean
-
-**usecase**: prehooks provide a central place for sanitizing, modifying, transforming, validating etc. all related incoming state updates. The prehook returns a **boolean** value (`true` to continue OR `false` to abort the update operation). The prehook may mutate (i.e. sanitize, transform, transpose) its argument values to accurately reflect the intended update value.
-
-## Usage
-
-<i><u>context.js</u></i>
-
-    import { createContext } from '@webkrafters/react-observable-context';
-	const ObservableContext = createContext();
-    export default ObservableContext;
-
-<i><u>reset.js</u></i>
-
-    import React, { useContext } from 'react';
-
-	import ObservableContext from './context';
-	
-	const Reset = () => {
-		
-		const { resetState } = useContext( ObservableContext );
-		
-		useEffect(() => console.log( 'Reset component rendered.....' ));
-		
-		return ( <button onClick={ resetState }>reset context</button> );
-	};
-	Reset.displayName = 'Reset';
-
-    export default Reset;
-
-<i><u>tally-display.js</u></i>
-
-    import React, { useContext, useEffect, useState } from 'react';
-
-	import ObservableContext from './context';
-
-	import Reset from './reset';
-    
-    const TallyDisplay = () => {
-    
-	    const { getState, subscribe } = useContext( ObservableContext );
-    
-	    const [ , tripRender ] = useState( false );
-	    
-	    useEffect(() => subscribe( newValue => {
-		    [ 'color', 'price', 'type' ].some( k => k in newValue ) &&
-		    tripRender( s => !s );
-	    }), []);
-	    
-	    useEffect(() => console.log( 'TallyDisplay component rendered.....' ));
-    
-	    return (
-			<div>
-				<table>
-					<tbody>
-						<tr><td><label>Type:</label></td><td>{ getState( s => s.type ) }</td></tr>
-						<tr><td><label>Color:</label></td><td>{ getState( s => s.color ) }</td></tr>
-						<tr><td><label>Price:</label></td><td>{ getState( s => s.price ).toFixed( 2 ) }</td></tr>
-					</tbody>
-				</table>
-				<div style={{ textAlign: 'right' }}>
-					<Reset />
-				</div>
-			</div>
-		);
-    };
-    TallyDisplay.displayName = 'TallyDisplay';
-    
-    export default TallyDisplay;
-
-<i><u>editor.js</u></i>
-
-    import React, { useCallback, useContext, useEffect, useRef } from 'react';
-
-	import ObservableContext from './context';
-    
-    const Editor = () => {
-    
-	    const { setState } = useContext( ObservableContext );
-    
-	    const priceInputRef = useRef();
-	    const colorInputRef = useRef();
-	    const typeInputRef = useRef();
-	    
-	    const updatePrice = useCallback(() => {
-		    setState({ price: Number( priceInputRef.current.value ) });
-	    }, []);
-	    
-	    const updateColor = useCallback(() => {
-		    setState({ color: colorInputRef.current.value });
-	    }, []);
-	    
-	    const updateType = useCallback(() => {
-		    setState({ type: typeInputRef.current.value });
-	    }, []);
-	    
-	    useEffect(() => console.log( 'Editor component rendered.....' ));
-    
-	    return (
-		    <fieldset style={{ margin: '10px 0' }}>
-			    <legend>Editor</legend>
-			    <div style={{ margin: '10px 0' }}>
-				    <label>New Price: <input ref={ priceInputRef } /></label>
-				    { ' ' }
-				    <button onClick={ updatePrice }>update price</button>
-			    </div>
-			    <div style={{ margin: '10px 0' }}>
-				    <label>New Color: <input ref={ colorInputRef } /></label>
-				    { ' ' }
-				    <button onClick={ updateColor }>update color</button>
-			    </div>
-			    <div style={{ margin: '10px 0' }}>
-				    <label>New Type: <input ref={ typeInputRef } /></label>
-				    { ' ' }
-				    <button onClick={ updateType }>update type</button>
-			    </div>
-		    </fieldset>    
-	    );
-	};
-    Editor.displayName = 'Editor';
-    
-    export default Editor;
-
-<i><u>product-description.js</u></i>
-
-    import React, { useContext, useEffect, useState } from 'react';
-
-	import ObservableContext from './context';
-    
-    const ProductDescription = () => {
-    
-	    const store = useContext( ObservableContext );
-	    
-	    const [ , tripRender ] = useState( false );
-	    
-	    useEffect(() => store.subscribe( newValue => {
-		    ( 'color' in newValue || 'type' in newValue ) &&
-		    tripRender( s => !s );
-	    } ), []);
-	    
-	    useEffect(() => console.log( 'ProductDescription component rendered.....' ));
-	    
-	    const color = store.getState( s => s.color );
-	    const type = store.getState( s => s.type );
-	    
-	    return (
-		    <div style={{ fontSize: 24 }}>
-			    <strong>Description:</strong> { color } { type }
-		    </div>
-	    );
-    };
-    ProductDescription.displayName = 'ProductDescription';
-    
-    export default ProductDescription;
-
-<i><u>price-sticker.js</u></i>
-
-    import React, { useContext, useEffect, useState } from 'react';
-
-	import ObservableContext from './context';
-    
-    const PriceSticker = () => {
-    
-	    const store = useContext( ObservableContext );
-	    
-	    const [ price, setPrice ] = useState(() => store.getState( s => s.price ));
-    
-	    useEffect(() => store.subscribe( newValue => {
-		    'price' in newValue && setPrice( newValue.price );
-	    } ), []);
-	    
-	    useEffect(() => console.log( 'PriceSticker component rendered.....' ));
-	    
-	    return (
-		    <div style={{ fontSize: 36, fontWeight: 800 }}>
-			    ${ price.toFixed( 2 ) }
-		    </div>
-	    );
-    };
-    PriceSticker.displayName = 'PriceSticker';
-    
-    export default PriceSticker;
-
-<i><u>product.js</u></i>
-
-    import React, { useCallback, useEffect, useState } from 'react';
-    import { Provider } from '@webkrafters/react-observable-context';
-
-	import ObservableContext from './context';
-    
-    import Editor from './editor';
-    import PriceSticker from './price-sticker';
-    import ProductDescription from './product-description';
-    import TallyDisplay from './tally-display';
-    
-    const Product = ({ prehooks = undefined, type }) => {
-	    
-	    const [ state, setState ] = useState(() => ({
-		    color: 'Burgundy',
-		    price: 22.5,
-		    type
-	    }));
-	    
-	    useEffect(() => {
-		    setState({ type }); // use this to update only the changed state
-		    // setState({ ...state, type }); // this will reset the context internal state
-	    }, [ type ]);
-	    
-	    const overridePricing = useCallback( e => setState({ price: Number( e.target.value ) }), [] );
-	    
-	    return (
-		    <div>
-			    <div style={{ marginBottom: 10 }}>
-				    <label>$ <input onKeyUp={ overridePricing } placeholder="override price here..."/></label>
-			    </div>
-			<Provider
-				context={ ObservableContext }
-				prehooks={ prehooks }
-				value={ state }
-			>
-				    <div style={{
-					    borderBottom: '1px solid #333',
-					    marginBottom: 10,
-					    paddingBottom: 5
-				    }}>
-					    <Editor />
-					    <TallyDisplay />
-				    </div>
-				    <ProductDescription />
-				    <PriceSticker />
-			    </Provider>
-		    </div>
-	    );
-    };
-    Product.displayName = 'Product';
-    
-    export default Product;
-
-<i><u>app.js</u></i>
-
-    import React, { useCallback, useMemo, useState } from 'react';
-    
-    import Product from './product';
-    
-    const App = () => {
-    
-	    const [ productType, setProductType ] = useState( 'Calculator' );
-    
-	    const updateType = useCallback( e => setProductType( e.target.value ), [] );
-		
-		const prehooks = React.useMemo(() => ({
-			resetState: ( ...args ) => {
-				console.log( 'resetting state with >>>> ', JSON.stringify( args ) );
-				return true;
-			},
-			setState: ( ...args ) => {
-				console.log( 'setting state with >>>> ', JSON.stringify( args ) );
-				return true;
-			}
-		}), []);
-    
-	    return (
-		    <div className="App">
-			    <h1>Demo</h1>
-			    <h2>A contrived product app.</h2>
-			    <div style={{ marginBottom: 10 }}>
-				    <label>Type: <input onKeyUp={ updateType } placeholder="override product type here..." /></label>
-			    </div>
-			    <Product prehooks={ prehooks } type={ productType } />
-		    </div>
-	    );
-    };
-    App.displayName = 'App';
-    
-    export default App;
-
-<i><u>index.js</i></b>
-
-    import React from 'react';
-    import ReactDOM from 'react-dom';
-    import App from './app';
-    ReactDOM.render(<App />, document.getElementById('root'));
-
-## License
-
-MIT
+# React-Observable-Context
+
+A context bearing an observable consumer store. State changes within the store's internal state are only broadcasted to components subscribed to the store. In this way, the `React-Observable-Context` prevents repeated automatic re-renderings of entire component trees resulting from ***context*** state changes.
+
+**React::memo** *(and PureComponents)* remain the go-to solution for the repeated automatic re-renderings of entire component trees resulting from ***component*** state changes.
+
+<h4><u>Install</u></h4>
+
+npm i -S @webkrafters/react-observable-context
+
+npm install --save @webkrafters/react-observable-context
+
+## API
+
+The React-Observable-Context package exports only **2** modules namely: the **createContext** method and the **Provider** component.
+
+`createContext` is a zero-parameter funtion returning a store-bearing context. Pass the context to the React::useContext() parameter to obtain the context's `store`.
+
+The `Provider` can immediately be used as-is anywhere the React-Observable-Context is required. It accepts **3** props and the customary Provider `children` prop. Supply the context to its `context` prop; the initial state to the customary Provider `value` prop; and the optional `prehooks` prop <i>(discussed in the prehooks section below)</i>.
+
+<i><u>Note:</u></i> the Provider `context` prop is not updateable. Once set, all further updates to this prop are not recorded.
+
+The context's `store` exposes **4** methods for interacting with the context's internal state namely:
+
+* **getState**: (selector?: (state: State) => any) => any
+
+* **resetState**: VoidFunction // resets the state to the Provider initial `value` prop.
+
+* **setState**: (changes: PartialState\<State\>) => void
+
+* **subscribe**: (listener: (newValue: PartialState\<State\>, oldValue: PartialState\<State\>) => void) => ***UnsubscribeFunction***
+
+### Prehooks
+
+The context's store update operation adheres to **2** user supplied prehooks when present. Otherwise, the update operation proceeds normally to completion. They are named **resetState** and **setState** after the store update methods which utilize them.
+
+* **resetState**: (state: {current: State, original: State}) => boolean
+
+* **setState**: (newChanges: PartialState\<State\>) => boolean
+
+***usecase***: prehooks provide a central place for sanitizing, modifying, transforming, validating etc. all related incoming state updates. The prehook returns a **boolean** value (`true` to continue OR `false` to abort the update operation). The prehook may mutate (i.e. sanitize, transform, transpose) its argument values to accurately reflect the intended update value.
+
+## Usage
+
+<i><u>context.js</u></i>
+
+    import { createContext } from '@webkrafters/react-observable-context';
+	const ObservableContext = createContext();
+    export default ObservableContext;
+
+<i><u>reset.js</u></i>
+
+    import React, { useContext } from 'react';
+
+	import ObservableContext from './context';
+	
+	const Reset = () => {
+		
+		const { resetState } = useContext( ObservableContext );
+		
+		useEffect(() => console.log( 'Reset component rendered.....' ));
+		
+		return ( <button onClick={ resetState }>reset context</button> );
+	};
+	Reset.displayName = 'Reset';
+
+    export default Reset;
+
+<i><u>tally-display.js</u></i>
+
+    import React, { useContext, useEffect, useState } from 'react';
+
+	import ObservableContext from './context';
+
+	import Reset from './reset';
+    
+    const TallyDisplay = () => {
+    
+	    const { getState, subscribe } = useContext( ObservableContext );
+    
+	    const [ , tripRender ] = useState( false );
+	    
+	    useEffect(() => subscribe( newValue => {
+		    [ 'color', 'price', 'type' ].some( k => k in newValue ) &&
+		    tripRender( s => !s );
+	    }), []);
+	    
+	    useEffect(() => console.log( 'TallyDisplay component rendered.....' ));
+    
+	    return (
+			<div>
+				<table>
+					<tbody>
+						<tr><td><label>Type:</label></td><td>{ getState( s => s.type ) }</td></tr>
+						<tr><td><label>Color:</label></td><td>{ getState( s => s.color ) }</td></tr>
+						<tr><td><label>Price:</label></td><td>{ getState( s => s.price ).toFixed( 2 ) }</td></tr>
+					</tbody>
+				</table>
+				<div style={{ textAlign: 'right' }}>
+					<Reset />
+				</div>
+			</div>
+		);
+    };
+    TallyDisplay.displayName = 'TallyDisplay';
+    
+    export default TallyDisplay;
+
+<i><u>editor.js</u></i>
+
+    import React, { useCallback, useContext, useEffect, useRef } from 'react';
+
+	import ObservableContext from './context';
+    
+    const Editor = () => {
+    
+	    const { setState } = useContext( ObservableContext );
+    
+	    const priceInputRef = useRef();
+	    const colorInputRef = useRef();
+	    const typeInputRef = useRef();
+	    
+	    const updatePrice = useCallback(() => {
+		    setState({ price: Number( priceInputRef.current.value ) });
+	    }, []);
+	    
+	    const updateColor = useCallback(() => {
+		    setState({ color: colorInputRef.current.value });
+	    }, []);
+	    
+	    const updateType = useCallback(() => {
+		    setState({ type: typeInputRef.current.value });
+	    }, []);
+	    
+	    useEffect(() => console.log( 'Editor component rendered.....' ));
+    
+	    return (
+		    <fieldset style={{ margin: '10px 0' }}>
+			    <legend>Editor</legend>
+			    <div style={{ margin: '10px 0' }}>
+				    <label>New Price: <input ref={ priceInputRef } /></label>
+				    { ' ' }
+				    <button onClick={ updatePrice }>update price</button>
+			    </div>
+			    <div style={{ margin: '10px 0' }}>
+				    <label>New Color: <input ref={ colorInputRef } /></label>
+				    { ' ' }
+				    <button onClick={ updateColor }>update color</button>
+			    </div>
+			    <div style={{ margin: '10px 0' }}>
+				    <label>New Type: <input ref={ typeInputRef } /></label>
+				    { ' ' }
+				    <button onClick={ updateType }>update type</button>
+			    </div>
+		    </fieldset>    
+	    );
+	};
+    Editor.displayName = 'Editor';
+    
+    export default Editor;
+
+<i><u>product-description.js</u></i>
+
+    import React, { useContext, useEffect, useState } from 'react';
+
+	import ObservableContext from './context';
+    
+    const ProductDescription = () => {
+    
+	    const store = useContext( ObservableContext );
+	    
+	    const [ , tripRender ] = useState( false );
+	    
+	    useEffect(() => store.subscribe( newValue => {
+		    ( 'color' in newValue || 'type' in newValue ) &&
+		    tripRender( s => !s );
+	    } ), []);
+	    
+	    useEffect(() => console.log( 'ProductDescription component rendered.....' ));
+	    
+	    const color = store.getState( s => s.color );
+	    const type = store.getState( s => s.type );
+	    
+	    return (
+		    <div style={{ fontSize: 24 }}>
+			    <strong>Description:</strong> { color } { type }
+		    </div>
+	    );
+    };
+    ProductDescription.displayName = 'ProductDescription';
+    
+    export default ProductDescription;
+
+<i><u>price-sticker.js</u></i>
+
+    import React, { useContext, useEffect, useState } from 'react';
+
+	import ObservableContext from './context';
+    
+    const PriceSticker = () => {
+    
+	    const store = useContext( ObservableContext );
+	    
+	    const [ price, setPrice ] = useState(() => store.getState( s => s.price ));
+    
+	    useEffect(() => store.subscribe( newValue => {
+		    'price' in newValue && setPrice( newValue.price );
+	    } ), []);
+	    
+	    useEffect(() => console.log( 'PriceSticker component rendered.....' ));
+	    
+	    return (
+		    <div style={{ fontSize: 36, fontWeight: 800 }}>
+			    ${ price.toFixed( 2 ) }
+		    </div>
+	    );
+    };
+    PriceSticker.displayName = 'PriceSticker';
+    
+    export default PriceSticker;
+
+<i><u>product.js</u></i>
+
+    import React, { useCallback, useEffect, useState } from 'react';
+    import { Provider } from '@webkrafters/react-observable-context';
+
+	import ObservableContext from './context';
+    
+    import Editor from './editor';
+    import PriceSticker from './price-sticker';
+    import ProductDescription from './product-description';
+    import TallyDisplay from './tally-display';
+    
+    const Product = ({ prehooks = undefined, type }) => {
+	    
+	    const [ state, setState ] = useState(() => ({
+		    color: 'Burgundy',
+		    price: 22.5,
+		    type
+	    }));
+	    
+	    useEffect(() => {
+		    setState({ type }); // use this to update only the changed state
+		    // setState({ ...state, type }); // this will reset the context internal state
+	    }, [ type ]);
+	    
+	    const overridePricing = useCallback( e => setState({ price: Number( e.target.value ) }), [] );
+	    
+	    return (
+		    <div>
+			    <div style={{ marginBottom: 10 }}>
+				    <label>$ <input onKeyUp={ overridePricing } placeholder="override price here..."/></label>
+			    </div>
+			<Provider
+				context={ ObservableContext }
+				prehooks={ prehooks }
+				value={ state }
+			>
+				    <div style={{
+					    borderBottom: '1px solid #333',
+					    marginBottom: 10,
+					    paddingBottom: 5
+				    }}>
+					    <Editor />
+					    <TallyDisplay />
+				    </div>
+				    <ProductDescription />
+				    <PriceSticker />
+			    </Provider>
+		    </div>
+	    );
+    };
+    Product.displayName = 'Product';
+    
+    export default Product;
+
+<i><u>app.js</u></i>
+
+    import React, { useCallback, useMemo, useState } from 'react';
+    
+    import Product from './product';
+    
+    const App = () => {
+    
+	    const [ productType, setProductType ] = useState( 'Calculator' );
+    
+	    const updateType = useCallback( e => setProductType( e.target.value ), [] );
+		
+		const prehooks = React.useMemo(() => ({
+			resetState: ( ...args ) => {
+				console.log( 'resetting state with >>>> ', JSON.stringify( args ) );
+				return true;
+			},
+			setState: ( ...args ) => {
+				console.log( 'setting state with >>>> ', JSON.stringify( args ) );
+				return true;
+			}
+		}), []);
+    
+	    return (
+		    <div className="App">
+			    <h1>Demo</h1>
+			    <h2>A contrived product app.</h2>
+			    <div style={{ marginBottom: 10 }}>
+				    <label>Type: <input onKeyUp={ updateType } placeholder="override product type here..." /></label>
+			    </div>
+			    <Product prehooks={ prehooks } type={ productType } />
+		    </div>
+	    );
+    };
+    App.displayName = 'App';
+    
+    export default App;
+
+<i><u>index.js</i></b>
+
+    import React from 'react';
+    import ReactDOM from 'react-dom';
+    import App from './app';
+    ReactDOM.render(<App />, document.getElementById('root'));
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -1,24 +1,24 @@
 export class UsageError extends Error {
 }
-export function createContext<T_1 extends State>(): import("react").Context<Store<T_1>>;
+export function createContext<T_1 extends State>(): React.Context<Store<T_2>>;
 /**
  * Note: `context` prop is not updateable. Furtther updates to this prop are ignored.
  *
- * @type {import("react").FC<{
- * 		children?: import("react").ReactNode,
+ * @type {React.FC<{
+ * 		children?: React.ReactNode,
  * 		context: ObservableContext<T>,
  * 		prehooks?: Prehooks<T>
- * 		value: T
+ * 		value: PartialState<T>
  * }>}
  * @template {State} T
  */
-export const Provider: import("react").FC<{
-    children?: import("react").ReactNode;
-    context: ObservableContext<T>;
+export const Provider: React.FC<{
+    children?: React.ReactNode;
+    context: React.Context<Store<T_1>>;
     prehooks?: Prehooks<T>;
-    value: T;
+    value: PartialState<T>;
 }>;
-export type ObservableContext<T_1 extends State> = import("react").Context<Store<T>>;
+export type ObservableContext<T_1 extends State> = React.Context<Store<T>>;
 export type OptionalTask<F = void> = F extends void ? () => never : F;
 export type Listener<T_1 extends State> = (newValue: PartialState<T>, oldValue: PartialState<T>) => void;
 export type State = {

package/dist/index.js

@@ -46,7 +46,8 @@ var reportNonReactUsage = function reportNonReactUsage() {
 };
 
 /**
- * @type {(state: T) => PartialState<T>}
+ * @param {T} state
+ * @return {PartialState<T>}
  * @template {State} T
  */
 var defaultSelector = function defaultSelector(state) {
@@ -96,14 +97,26 @@ var _setState = function _setState(state, newState, onStateChange) {
   !(0, _lodash2["default"])(newChanges) && onStateChange(newChanges, replacedValue);
 };
 
+/**
+ * @param {Prehooks<T>} prehooks
+ * @template {State} T
+ */
+var usePrehooksRef = function usePrehooksRef(prehooks) {
+  var prehooksRef = (0, _react.useRef)(prehooks);
+  (0, _react.useEffect)(function () {
+    prehooksRef.current = prehooks;
+  }, [prehooks]);
+  return prehooksRef;
+};
+
 /**
  * Note: `context` prop is not updateable. Furtther updates to this prop are ignored.
  *
- * @type {import("react").FC<{
- * 		children?: import("react").ReactNode,
+ * @type {React.FC<{
+ * 		children?: React.ReactNode,
  * 		context: ObservableContext<T>,
  * 		prehooks?: Prehooks<T>
- * 		value: T
+ * 		value: PartialState<T>
  * }>}
  * @template {State} T
  */
@@ -114,21 +127,25 @@ var Provider = function Provider(_ref) {
     _ref$prehooks = _ref.prehooks,
     prehooks = _ref$prehooks === void 0 ? defaultPrehooks : _ref$prehooks,
     value = _ref.value;
-  var prehooksRef = (0, _react.useRef)(prehooks);
+  var prehooksRef = usePrehooksRef(prehooks);
   var initialState = (0, _react.useRef)(value);
 
-  /** @type {[T, Function]} */
+  /** @type {[Set<Listener<T>>, Function]} */
   var _useState = (0, _react.useState)(function () {
-      return (0, _lodash["default"])(value);
+      return new Set();
     }),
     _useState2 = _slicedToArray(_useState, 1),
-    state = _useState2[0];
-  /** @type {[Set<Listener<T>>, Function]} */
+    listeners = _useState2[0];
+  /** @type {[T, Function]} */
   var _useState3 = (0, _react.useState)(function () {
-      return new Set();
+      return (0, _lodash["default"])(value);
     }),
     _useState4 = _slicedToArray(_useState3, 1),
-    listeners = _useState4[0];
+    state = _useState4[0];
+  /** @type {ObservableContext<T>} */
+  var _useState5 = (0, _react.useState)(context),
+    _useState6 = _slicedToArray(_useState5, 1),
+    StoreContext = _useState6[0];
 
   /** @type {Listener<T>} */
   var onChange = function onChange(newValue, oldValue) {
@@ -154,6 +171,7 @@ var Provider = function Provider(_ref) {
 
   /** @type {Store<T>["setState"]} */
   var setState = (0, _react.useCallback)(function (changes) {
+    changes = (0, _lodash["default"])(changes);
     (!('setState' in prehooksRef.current) || prehooksRef.current.setState(changes)) && _setState(state, changes, onChange);
   }, []);
 
@@ -167,12 +185,9 @@ var Provider = function Provider(_ref) {
   (0, _react.useEffect)(function () {
     return setState((0, _lodash["default"])(value));
   }, [value]);
-  (0, _react.useEffect)(function () {
-    prehooksRef.current = prehooks;
-  }, [prehooks]);
-  /** @type {[Store<T>, Function]} */
 
-  var _useState5 = (0, _react.useState)(function () {
+  /** @type {[Store<T>, Function]} */
+  var _useState7 = (0, _react.useState)(function () {
       return {
         getState: getState,
         resetState: resetState,
@@ -180,12 +195,8 @@ var Provider = function Provider(_ref) {
         subscribe: subscribe
       };
     }),
-    _useState6 = _slicedToArray(_useState5, 1),
-    store = _useState6[0];
-  /** @type {ObservableContext<T>} */
-  var _useState7 = (0, _react.useState)(context),
     _useState8 = _slicedToArray(_useState7, 1),
-    StoreContext = _useState8[0];
+    store = _useState8[0];
   return /*#__PURE__*/_react["default"].createElement(StoreContext.Provider, {
     value: store
   }, children);
@@ -194,7 +205,7 @@ exports.Provider = Provider;
 Provider.displayName = 'ObservableContext.Provider';
 
 /**
- * @typedef {import("react").Context<Store<T>>} ObservableContext
+ * @typedef {React.Context<Store<T>>} ObservableContext
  * @template {State} T
  */
 

package/package.json

@@ -1,79 +1,79 @@
-{
-  "author": "Stephen Isienyi <stephen.isienyi@webkrafting.com>",
-  "bugs": {
-    "url": "https://github.com/steveswork/react-observable-context/issues"
-  },
-  "contributors": [
-    "steveswork <stephen.isienyi@webkrafting.com> (https://github.com/steveswork)"
-  ],
-  "dependencies": {
-    "@types/react": "^18.0.17",
-    "lodash.clonedeep": "^4.5.0",
-    "lodash.isempty": "^4.4.0",
-    "react": "^18.2.0"
-  },
-  "description": "Observable react context - prevents an automatic total component tree tear-down and re-rendering during context updates.",
-  "devDependencies": {
-    "@babel/cli": "^7.17.0",
-    "@babel/core": "^7.12.10",
-    "@babel/node": "^7.12.10",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
-    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/preset-env": "^7.12.11",
-    "@babel/preset-react": "^7.18.6",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest-cli": "^24.3.0",
-    "babel-jest": "^26.6.3",
-    "babel-loader": "^8.2.5",
-    "eslint": "^7.15.0",
-    "eslint-config-standard": "^16.0.2",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^24.1.3",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.31.11",
-    "eslint-plugin-standard": "^5.0.0",
-    "jest-cli": "^26.6.3",
-    "react-dom": "^18.2.0",
-    "react-performance-testing": "^2.0.0",
-    "typescript": "^4.8.2"
-  },
-  "files": [
-    "dist/index.js",
-    "dist/index.d.ts",
-    "index",
-    "package.json"
-  ],
-  "homepage": "https://github.com/steveswork/react-observable-context#readme",
-  "jest": {
-    "transform": {
-      "\\.[jt]sx?$": "babel-jest"
-    }
-  },
-  "keywords": [
-    "context",
-    "react-hooks",
-    "react-context",
-    "react",
-    "useContext"
-  ],
-  "license": "MIT",
-  "main": "index.js",
-  "name": "@webkrafters/react-observable-context",
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/steveswork/react-observable-context.git"
-  },
-  "scripts": {
-    "build": "eslint --fix && rm -rf dist && babel src -d dist && npx -p typescript tsc",
-    "test": "eslint --fix && jest",
-    "test:watch": "eslint --fix && jest --watchAll"
-  },
-  "types": "dist/index.d.ts",
-  "version": "1.1.3"
-}
+{
+  "author": "Stephen Isienyi <stephen.isienyi@webkrafting.com>",
+  "bugs": {
+    "url": "https://github.com/steveswork/react-observable-context/issues"
+  },
+  "contributors": [
+    "steveswork <stephen.isienyi@webkrafting.com> (https://github.com/steveswork)"
+  ],
+  "dependencies": {
+    "@types/react": "^18.0.17",
+    "lodash.clonedeep": "^4.5.0",
+    "lodash.isempty": "^4.4.0",
+    "react": "^18.2.0"
+  },
+  "description": "Observable react context - prevents an automatic total component tree tear-down and re-rendering during context updates.",
+  "devDependencies": {
+    "@babel/cli": "^7.17.0",
+    "@babel/core": "^7.12.10",
+    "@babel/node": "^7.12.10",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-react": "^7.18.6",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest-cli": "^24.3.0",
+    "babel-jest": "^26.6.3",
+    "babel-loader": "^8.2.5",
+    "eslint": "^7.15.0",
+    "eslint-config-standard": "^16.0.2",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jest": "^24.1.3",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-standard": "^5.0.0",
+    "jest-cli": "^26.6.3",
+    "react-dom": "^18.2.0",
+    "react-performance-testing": "^2.0.0",
+    "typescript": "^4.8.2"
+  },
+  "files": [
+    "dist/index.js",
+    "dist/index.d.ts",
+    "index",
+    "package.json"
+  ],
+  "homepage": "https://github.com/steveswork/react-observable-context#readme",
+  "jest": {
+    "transform": {
+      "\\.[jt]sx?$": "babel-jest"
+    }
+  },
+  "keywords": [
+    "context",
+    "react-hooks",
+    "react-context",
+    "react",
+    "useContext"
+  ],
+  "license": "MIT",
+  "main": "index.js",
+  "name": "@webkrafters/react-observable-context",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/steveswork/react-observable-context.git"
+  },
+  "scripts": {
+    "build": "eslint --fix && rm -rf dist && babel src -d dist && npx -p typescript tsc",
+    "test": "eslint --fix && jest",
+    "test:watch": "eslint --fix && jest --watchAll"
+  },
+  "types": "dist/index.d.ts",
+  "version": "1.1.5"
+}