Tweak README + Add further test (#2)

* Tweak README + Add further test

* Tweak

* Tweak test

* Tweak

* Tweak

Author: PauloMFJ

README.md

@@ -16,7 +16,7 @@ npm i @phntms/use-animation-frame
 
 ## API
 
-Accepts first `callback` and second optional `framesPerSecond`:
+Accepts first `callback` and second `framesPerSecond`:
 
 ```ts
 useAnimationFrame(callback, framesPerSecond);
@@ -32,11 +32,11 @@ useAnimationFrame(callback, framesPerSecond);
 
 The callback returns `deltaTime` - the total time in `ms` since the hook last run.
 
-**Note**: Due to the nature of `requestAnimationFrame()` this will always likely slightly differ in time.
+**Note**: Due to the nature of `requestAnimationFrame()` this will always likely differ in time.
 
-## Single Shared `requestAnimationFrame()` Instances
+## Single Shared `requestAnimationFrame()` Instance
 
-A highlight of this library over similar implementations is that instead of creating a new `requestAnimationFrame()` event listener for every instances of the hook, we're instead using one global instances that we 'hook' into for all instances of the hook used. This means you're getting less of a performance hit for using multiple instances of the hook. Additionally if used with custom `fps` limits, you can get much greater performance out of your components!
+Most implementations of this hook create unique `requestAnimationFrame()` loops for all instances of the hook. This is fine when you only use the hook once, but if you start running multiple hooks simultaneously this can get expensive. To counteract this issue, this library only ever creates a single global loop that we 'hook' into for all instances of the hook used. As such, you haven't got to worry about the potential performance hit of using multiple instances of the hook. Additionally if used alongside custom `framesPerSecond`, you can get much greater performance out of your components!
 
 ## Examples
 

test/index.test.tsx

@@ -35,10 +35,22 @@ describe("The hook", () => {
     expect(lastDeltaTime).toEqual(STEP_TIME_INCREMENT * 2);
   });
 
+  it("should only use a single requestAnimationFrame() if multiple hooks are used", async () => {
+    const callback = () => null;
+
+    renderHook(() => useAnimationFrame(callback));
+    renderHook(() => useAnimationFrame(callback, 30));
+
+    expect(mockRequestAnimationFrame.requestAnimationFrameCount()).toEqual(1);
+  });
+
   it("should cleanup after unmounting", async () => {
     const callback = () => null;
+
     const { unmount } = renderHook(() => useAnimationFrame(callback));
+
     unmount();
+
     expect(mockRequestAnimationFrame.requestAnimationFrameCount()).toEqual(0);
   });
 });