Merge pull request #2 from mblink/useLayoutEffect

Added useStableLayoutEffect

src/index.ts

@@ -1,4 +1,5 @@
 export { useStable, useStableE, useStableO } from './state';
 export { useStableEffect } from './effect';
+export { useStableLayoutEffect } from './layoutEffect';
 export { useStableCallback } from './callback';
 export { useStableMemo } from './memo';

src/layoutEffect.ts

@@ -0,0 +1,11 @@
+import * as Eq from 'fp-ts/Eq';
+import { EffectCallback, useLayoutEffect } from 'react';
+import { useEqMemoize } from './useEqMemoize';
+
+export const useStableLayoutEffect = <A extends ReadonlyArray<unknown>>(
+  callback: EffectCallback,
+  dependencies: A,
+  eq: Eq.Eq<A>
+): ReturnType<typeof useLayoutEffect> => {
+  return useLayoutEffect(callback, useEqMemoize(dependencies, eq));
+};

test/callback.test.ts

@@ -1,13 +1,8 @@
-import * as Eq from 'fp-ts/Eq';
 import * as O from 'fp-ts/Option';
+import { nEq, o1a, o1b, o2 } from './state';
 import { renderHook } from '@testing-library/react-hooks';
 import { useStableCallback } from '../src/index';
 
-const o1a = O.some(1);
-const o1b = O.some(1);
-const o2 = O.some(2);
-const nEq = Eq.getTupleEq(O.getEq(Eq.eqNumber));
-
 describe('useStableCallback', () => {
   test('should not return a new function if the values are the same', () => {
     let o = o1a;

test/effect.test.ts

@@ -1,17 +1,13 @@
-import * as Eq from 'fp-ts/Eq';
 import * as O from 'fp-ts/Option';
+import { nEq, o1a, o1b, o2 } from './state';
 import { renderHook } from '@testing-library/react-hooks';
 import { useStableEffect } from '../src/index';
 
-const o1a = O.some(1);
-const o1b = O.some(1);
-const o2 = O.some(2);
-
 describe('useStableEffect', () => {
   test('should not be called if the values are the same', () => {
     let o = o1a;
     const { rerender } = renderHook(() => {
-      useStableEffect(() => { o = o2; }, [o], Eq.getTupleEq(O.getEq(Eq.eqNumber)));
+      useStableEffect(() => { o = o2; }, [o], nEq);
     });
     o = o1b;
     rerender();
@@ -22,7 +18,7 @@ describe('useStableEffect', () => {
     const o99 = O.some(99);
     let o = o1a;
     const { rerender } = renderHook(() => {
-      useStableEffect(() => { o = o99; }, [o], Eq.getTupleEq(O.getEq(Eq.eqNumber)));
+      useStableEffect(() => { o = o99; }, [o], nEq);
     });
     o = o2;
     rerender();

test/layoutEffect.test.ts

@@ -0,0 +1,27 @@
+import * as O from 'fp-ts/Option';
+import { nEq, o1a, o1b, o2 } from './state';
+import { renderHook } from '@testing-library/react-hooks';
+import { useStableLayoutEffect } from '../src/index';
+
+describe('useStableLayoutEffect', () => {
+  test('should not be called if the values are the same', () => {
+    let o = o1a;
+    const { rerender } = renderHook(() => {
+      useStableLayoutEffect(() => { o = o2; }, [o], nEq);
+    });
+    o = o1b;
+    rerender();
+    expect(o).toStrictEqual(o1a);
+  });
+
+  test('should be called if the values are different', () => {
+    const o99 = O.some(99);
+    let o = o1a;
+    const { rerender } = renderHook(() => {
+      useStableLayoutEffect(() => { o = o99; }, [o], nEq);
+    });
+    o = o2;
+    rerender();
+    expect(o).toStrictEqual(o99);
+  });
+});

test/memo.test.ts

@@ -1,11 +1,9 @@
 import * as Eq from 'fp-ts/Eq';
 import * as O from 'fp-ts/Option';
+import { o1a, o1b, o2 } from './state';
 import { renderHook } from '@testing-library/react-hooks';
 import { useStableMemo } from '../src/index';
 
-const o1a = O.some(1);
-const o1b = O.some(1);
-const o2 = O.some(2);
 const nEq = Eq.getTupleEq(O.getEq(Eq.eqNumber));
 
 describe('useStableMemo', () => {

test/state.test.ts

@@ -1,17 +1,10 @@
-import * as E from 'fp-ts/Either';
 import * as Eq from 'fp-ts/Eq';
 import * as O from 'fp-ts/Option';
 import { act, renderHook } from '@testing-library/react-hooks';
+import { e1a, e1b, e2, o1a, o1b, o2 } from './state';
 import { useStable, useStableE, useStableO } from '../src/index';
 import { Dispatch } from 'react';
 
-const o1a = O.some(1);
-const o1b = O.some(1);
-const o2 = O.some(2);
-const e1a = E.right(1);
-const e1b = E.right(1);
-const e2 = E.right(2);
-
 type Test<A = any> = {describe: string, fn: (a: A) => [A, Dispatch<A>], val1a: A, val1b: A, val2: A};
 const tests: Test[] = [
   {

test/state.ts

@@ -0,0 +1,13 @@
+import * as E from 'fp-ts/Either';
+import * as Eq from 'fp-ts/Eq';
+import * as O from 'fp-ts/Option';
+
+export const o1a = O.some(1);
+export const o1b = O.some(1);
+export const o2 = O.some(2);
+
+export const e1a = E.right(1);
+export const e1b = E.right(1);
+export const e2 = E.right(2);
+
+export const nEq = Eq.getTupleEq(O.getEq(Eq.eqNumber));