set dispatchRef in render to avoid useLayoutEffect

dai-shi · Nov 28, 2019 · 5da7357 · 5da7357
1 parent 1305b2e
commit 5da7357
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 7 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -23,7 +23,7 @@
   },
   "rules": {
     "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": ["error", { "additionalHooks": "useIsomorphicLayoutEffect" }],
+    "react-hooks/exhaustive-deps": "error",
     "@typescript-eslint/explicit-function-return-type": "off",
     "react/jsx-filename-extension": ["error", { "extensions": [".js", ".tsx"] }],
     "react/prop-types": "off",

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,7 +2,7 @@
 
 ## [Unreleased]
 ### Changed
-- Use useIsomorphicLayoutEffect hack to avoid warning in SSR
+- Do not useLayoutEffect which shows warning in SSR
 
 ## [3.8.0] - 2019-11-26
 ### Changed

diff --git a/src/use-async-task.js b/src/use-async-task.js
@@ -1,6 +1,4 @@
-import { useEffect, useLayoutEffect, useReducer, useRef } from 'react';
-
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+import { useEffect, useReducer, useRef } from 'react';
 
 const createTask = ({ func, dispatchRef }) => {
   const taskId = Symbol('TASK_ID');
@@ -100,8 +98,8 @@ export const useAsyncTask = (func) => {
   if (task.func !== func) {
     dispatch({ type: 'INIT', func, dispatchRef });
   }
-  useIsomorphicLayoutEffect(() => {
-    dispatchRef.current = dispatch;
+  dispatchRef.current = dispatch;
+  useEffect(() => {
     const cleanup = () => {
       dispatchRef.current = () => {};
     };