From d2b3e4861ee808fb825fa9dfff27a5d4aec7317f Mon Sep 17 00:00:00 2001 From: Harim Tejada Date: Tue, 23 Nov 2021 13:57:18 -0500 Subject: [PATCH 1/2] Added useStableLayoutEffect --- src/index.ts | 1 + src/layoutEffect.ts | 11 +++++++++++ test/callback.test.ts | 6 +----- test/effect.test.ts | 9 +++------ test/layoutEffect.test.ts | 27 +++++++++++++++++++++++++++ test/memo.test.ts | 4 +--- test/state.test.ts | 9 +-------- test/state.ts | 13 +++++++++++++ 8 files changed, 58 insertions(+), 22 deletions(-) create mode 100644 src/layoutEffect.ts create mode 100644 test/layoutEffect.test.ts create mode 100644 test/state.ts diff --git a/src/index.ts b/src/index.ts index 0cdae12..9290746 100644 --- a/src/index.ts +++ b/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'; \ No newline at end of file diff --git a/src/layoutEffect.ts b/src/layoutEffect.ts new file mode 100644 index 0000000..22d3200 --- /dev/null +++ b/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 = >( + callback: EffectCallback, + dependencies: A, + eq: Eq.Eq +): ReturnType => { + return useLayoutEffect(callback, useEqMemoize(dependencies, eq)); +}; \ No newline at end of file diff --git a/test/callback.test.ts b/test/callback.test.ts index 5b3babe..6f17341 100644 --- a/test/callback.test.ts +++ b/test/callback.test.ts @@ -1,13 +1,9 @@ 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; diff --git a/test/effect.test.ts b/test/effect.test.ts index f53544c..29a5f24 100644 --- a/test/effect.test.ts +++ b/test/effect.test.ts @@ -1,17 +1,14 @@ 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 +19,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(); diff --git a/test/layoutEffect.test.ts b/test/layoutEffect.test.ts new file mode 100644 index 0000000..ae9ef03 --- /dev/null +++ b/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); + }); +}); diff --git a/test/memo.test.ts b/test/memo.test.ts index 74442b8..15ffcfb 100644 --- a/test/memo.test.ts +++ b/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', () => { diff --git a/test/state.test.ts b/test/state.test.ts index 2355e59..3079004 100644 --- a/test/state.test.ts +++ b/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 = {describe: string, fn: (a: A) => [A, Dispatch], val1a: A, val1b: A, val2: A}; const tests: Test[] = [ { diff --git a/test/state.ts b/test/state.ts new file mode 100644 index 0000000..8fec6f1 --- /dev/null +++ b/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)); From ccca7afd093420deded811c349a59ba019c8347b Mon Sep 17 00:00:00 2001 From: Harim Tejada Date: Tue, 23 Nov 2021 13:59:33 -0500 Subject: [PATCH 2/2] Remove Eq import --- test/callback.test.ts | 1 - test/effect.test.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/test/callback.test.ts b/test/callback.test.ts index 6f17341..773affa 100644 --- a/test/callback.test.ts +++ b/test/callback.test.ts @@ -1,4 +1,3 @@ -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'; diff --git a/test/effect.test.ts b/test/effect.test.ts index 29a5f24..7a1c360 100644 --- a/test/effect.test.ts +++ b/test/effect.test.ts @@ -1,4 +1,3 @@ -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';