From ce6ba06a0f51fc7e50c8e529b8984c9714945c62 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Fri, 2 Sep 2022 14:23:48 +0100
Subject: [PATCH] edits

---
 .../pages/learn/reusing-logic-with-custom-hooks.md    | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/beta/src/pages/learn/reusing-logic-with-custom-hooks.md b/beta/src/pages/learn/reusing-logic-with-custom-hooks.md
index b0cdf7d7..b2d1fda5 100644
--- a/beta/src/pages/learn/reusing-logic-with-custom-hooks.md
+++ b/beta/src/pages/learn/reusing-logic-with-custom-hooks.md
@@ -1682,13 +1682,14 @@ function useAnimationLoop(isRunning, drawFrame) {
       return;
     }
 
+    const startTime = performance.now();
+
     function tick(now) {
       const timePassed = now - startTime;
       onFrame(timePassed);
       frameId = requestAnimationFrame(tick);
     }
 
-    const startTime = performance.now();
     tick();
     return () => cancelAnimationFrame(frameId);
   }, [isRunning, onFrame]); // TODO: Linter will allow [isRunning] in the future
@@ -1729,9 +1730,7 @@ html, body { min-height: 300px; }
 
 </Sandpack>
 
-There's no one best way to do it. As with regular functions, ultimately you decide where to draw the boundaries between different parts of your code. Keep in mind that no abstraction at all is better than a wrong abstraction.
-
-For example, you could also take a very different approach, and move the imperative logic into a JavaScript [class:](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)
+However, you didn't *have to* do that. As with regular functions, ultimately you decide where to draw the boundaries between different parts of your code. For example, you could also take a very different approach. Instead of keeping the logic in the Effect, you could move most of the imperative logic inside a JavaScript [class:](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)
 
 <Sandpack>
 
@@ -1829,7 +1828,7 @@ html, body { min-height: 300px; }
 
 </Sandpack>
 
-Effects let you connect React to external systems. The more coordination between Effects is needed (for example, to combine many animations), the more it makes sense to extract that logic out of Effects and Hooks *completely* like in the sandbox above. Then, the code you extracted *becomes* the "external system." This lets your Effects stay simple because they only need to send messages to the system you've moved outside React.
+Effects let you connect React to external systems. The more coordination between Effects is needed (for example, to chain multiple animations), the more it makes sense to extract that logic out of Effects and Hooks *completely* like in the sandbox above. Then, the code you extracted *becomes* the "external system." This lets your Effects stay simple because they only need to send messages to the system you've moved outside React.
 
 The examples above assume that the fade-in logic needs to be written in JavaScript. However, this particular fade-in animation is both simpler and much more efficient to implement with a plain [CSS Animation:](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
 
@@ -1886,7 +1885,7 @@ html, body { min-height: 300px; }
 
 </Sandpack>
 
-If you can do something with CSS, don't write a Hook. Let the browser handle it!
+Sometimes, you don't even need a Hook!
 
 <Recap>