react-hooks-worker - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

CHANGELOG.md

 # Change Log
 
 ## [Unreleased]
+
+## [0.6.0] - 2019-05-18
+### Changed
+- Improve internal implementation with useReducer
+
 ## [0.5.0] - 2019-05-18
@@ -5,0 +10,0 @@ ### Changed

dist/index.js

@@ -18,7 +18,32 @@ "use strict";
 
-var batchedUpdates = function batchedUpdates(callback) {
-  if (_react.unstable_batchedUpdates) {
-    (0, _react.unstable_batchedUpdates)(callback);
-  } else {
-    callback();
+var initialState = {
+  result: null,
+  error: null
+};
+
+var reducer = function reducer(state, action) {
+  switch (action.type) {
+    case 'init':
+      return initialState;
+
+    case 'result':
+      return {
+        result: action.result,
+        error: null
+      };
+
+    case 'error':
+      return {
+        result: null,
+        error: 'error'
+      };
+
+    case 'messageerror':
+      return {
+        result: null,
+        error: 'messageerror'
+      };
+
+    default:
+      throw new Error('no such action type');
   }
@@ -39,12 +64,7 @@ };
 var useWorker = function useWorker(func, input) {
-  var _useState = (0, _react.useState)(null),
-      _useState2 = _slicedToArray(_useState, 2),
-      result = _useState2[0],
-      setResult = _useState2[1];
+  var _useReducer = (0, _react.useReducer)(reducer, initialState),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      state = _useReducer2[0],
+      dispatch = _useReducer2[1];
 
-  var _useState3 = (0, _react.useState)(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      error = _useState4[0],
-      setError = _useState4[1];
-
   var worker = (0, _react.useMemo)(function () {
@@ -57,7 +77,10 @@ return createWorker(func);
 
+    var dispatchSafe = function dispatchSafe(action) {
+      return dispatch(action);
+    };
+
     worker.onmessage = function (e) {
-      if (lastWorker.current !== worker) return;
-      batchedUpdates(function () {
-        setResult(e.data);
-        setError(null);
+      return dispatchSafe({
+        type: 'result',
+        result: e.data
       });
@@ -67,6 +90,4 @@ };
     worker.onerror = function () {
-      if (lastWorker.current !== worker) return;
-      batchedUpdates(function () {
-        setResult(null);
-        setError('error');
+      return dispatchSafe({
+        type: 'error'
       });
@@ -76,6 +97,4 @@ };
     worker.onmessageerror = function () {
-      if (lastWorker.current !== worker) return;
-      batchedUpdates(function () {
-        setResult(null);
-        setError('messageerror');
+      return dispatchSafe({
+        type: 'messageerror'
       });
@@ -85,3 +104,11 @@ };
     var cleanup = function cleanup() {
+      dispatchSafe = function dispatchSafe() {
+        return null;
+      }; // we should not dispatch after cleanup.
+
+
       worker.terminate();
+      dispatch({
+        type: 'init'
+      });
     };
@@ -94,8 +121,5 @@
   }, [input]);
-  return {
-    result: result,
-    error: error
-  };
+  return state;
 };
 
 exports.useWorker = useWorker;

package.json

 {
   "name": "react-hooks-worker",
   "description": "React custom hooks for web workers",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "author": "Daishi Kato",
@@ -6,0 +6,0 @@ "repository": {

src/index.js

@@ -5,11 +5,18 @@ import {
   useRef,
-  useState,
-  unstable_batchedUpdates,
+  useReducer,
 } from 'react';
 
-const batchedUpdates = (callback) => {
-  if (unstable_batchedUpdates) {
-    unstable_batchedUpdates(callback);
-  } else {
-    callback();
+const initialState = { result: null, error: null };
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'init':
+      return initialState;
+    case 'result':
+      return { result: action.result, error: null };
+    case 'error':
+      return { result: null, error: 'error' };
+    case 'messageerror':
+      return { result: null, error: 'messageerror' };
+    default:
+      throw new Error('no such action type');
   }
@@ -40,4 +47,3 @@ };
 export const useWorker = (func, input) => {
-  const [result, setResult] = useState(null);
-  const [error, setError] = useState(null);
+  const [state, dispatch] = useReducer(reducer, initialState);
   const worker = useMemo(() => createWorker(func), [func]);
@@ -47,25 +53,10 @@ const lastWorker = useRef(null);
     lastWorker.current = worker;
-    worker.onmessage = (e) => {
-      if (lastWorker.current !== worker) return;
-      batchedUpdates(() => {
-        setResult(e.data);
-        setError(null);
-      });
-    };
-    worker.onerror = () => {
-      if (lastWorker.current !== worker) return;
-      batchedUpdates(() => {
-        setResult(null);
-        setError('error');
-      });
-    };
-    worker.onmessageerror = () => {
-      if (lastWorker.current !== worker) return;
-      batchedUpdates(() => {
-        setResult(null);
-        setError('messageerror');
-      });
-    };
+    let dispatchSafe = action => dispatch(action);
+    worker.onmessage = e => dispatchSafe({ type: 'result', result: e.data });
+    worker.onerror = () => dispatchSafe({ type: 'error' });
+    worker.onmessageerror = () => dispatchSafe({ type: 'messageerror' });
     const cleanup = () => {
+      dispatchSafe = () => null; // we should not dispatch after cleanup.
       worker.terminate();
+      dispatch({ type: 'init' });
     };
@@ -77,3 +68,3 @@ return cleanup;
   }, [input]);
-  return { result, error };
+  return state;
 };

No alert changes

Improved metrics

Total package byte prevSize

11640

increased by3.09%

Lines of code

166

increased by5.06%

No dependency changes