From 5906defefd4f555256622b4e0c4b6a1514a90e51 Mon Sep 17 00:00:00 2001
From: Joe Jiang <hijiangtao@gmail.com>
Date: Sun, 16 Dec 2018 16:54:56 +0800
Subject: [PATCH] Fix synchronously re-render bug of useRef hook

* Another animation frame will be requested before the cleanup function for `useEffect` is executed.
* Use `useLayoutEffect` to replace `useEffect`, in order to guarantee `cancelAnimationFrame` can work well.

More details can be found in issue https://github.com/streamich/react-use/issues/76
---
 src/useRaf.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/useRaf.ts b/src/useRaf.ts
index cd0d8b78e3..ef64d2ffce 100644
--- a/src/useRaf.ts
+++ b/src/useRaf.ts
@@ -1,9 +1,9 @@
-import {useState, useEffect} from './react';
+import {useState, useLayoutEffect} from './react';
 
 const useRaf = (ms: number = 1e12, delay: number = 0): number => {
   const [elapsed, set] = useState<number>(0);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     let raf, timerStop, start;
 
     const onFrame = () => {