feat(hooks): add after mount effects hooks

p3ol · Dec 15, 2022 · 9735822 · 9735822
1 parent 734402b
commit 9735822
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 6 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -17,6 +17,7 @@ module.exports = {
     config.resolve.alias = {
       'react-native': 'react-native-web',
       '@junipero/core': path.resolve('./packages/core/lib'),
+      '@junipero/react': path.resolve('./packages/react/lib'),
       '@junipero/hooks': path.resolve('./packages/hooks/lib'),
       '@junipero/transitions': path.resolve('./packages/transitions/lib'),
     };

diff --git a/packages/hooks/lib/index.js b/packages/hooks/lib/index.js
@@ -1,4 +1,4 @@
-import { useRef, useEffect } from 'react';
+import { useRef, useEffect, useLayoutEffect } from 'react';
 
 export const useEventListener = (
   name,
@@ -28,11 +28,11 @@ export const useEventListener = (
 };
 
 export const useInterval = (
-  cb, time, changes = [], { enabled = true } = {}
+  cb, time, changes = [], { enabled = true, layoutEffect = false } = {}
 ) => {
   const returnedCallbackRef = useRef();
 
-  useEffect(() => {
+  (layoutEffect ? useLayoutEffect : useEffect)(() => {
     if (!enabled) {
       return;
     }
@@ -49,11 +49,11 @@ export const useInterval = (
 };
 
 export const useTimeout = (
-  cb, time, changes = [], { enabled = true } = {}
+  cb, time, changes = [], { enabled = true, layoutEffect = false } = {}
 ) => {
   const returnedCallbackRef = useRef();
 
-  useEffect(() => {
+  (layoutEffect ? useLayoutEffect : useEffect)(() => {
     if (!enabled) {
       return;
     }
@@ -68,3 +68,23 @@ export const useTimeout = (
     };
   }, changes);
 };
+
+const useAfterMount = (cb, changes = [], { layoutEffect = false } = {}) => {
+  const mounted = useRef(false);
+
+  (layoutEffect ? useLayoutEffect : useEffect)(() => {
+    if (!mounted.current) {
+      mounted.current = true;
+
+      return;
+    }
+
+    return cb();
+  }, changes);
+};
+
+export const useEffectAfterMount = (cb, changes = []) =>
+  useAfterMount(cb, changes);
+
+export const useLayoutEffectAfterMount = (cb, changes = []) =>
+  useAfterMount(cb, changes, { layoutEffect: true });
diff --git a/packages/hooks/lib/index.test.js b/packages/hooks/lib/index.test.js
@@ -2,7 +2,13 @@ import { useState } from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { classNames } from '@junipero/core';
 
-import { useEventListener, useTimeout, useInterval } from './';
+import {
+  useEventListener,
+  useTimeout,
+  useInterval,
+  useEffectAfterMount,
+  useLayoutEffectAfterMount,
+} from './';
 
 /* eslint-disable react/prop-types */
 const TestComponent = ({ target, onTimeout, onInterval }) => {
@@ -64,3 +70,43 @@ describe('useTimeout(listener, time, changes)', () => {
     jest.useRealTimers();
   });
 });
+
+/* eslint-disable react/prop-types */
+const EffectsTestComponent = ({ enabled, onEffect, onLayoutEffect }) => {
+  onEffect && useEffectAfterMount(() => {
+    onEffect();
+  }, [enabled]);
+
+  onLayoutEffect && useLayoutEffectAfterMount(() => {
+    onLayoutEffect();
+  }, [enabled]);
+
+  return null;
+};
+/* eslint-enable react/prop-types */
+
+describe('useEffectAfterMount(cb, changes)', () => {
+  it('should execute task after mount', () => {
+    const onEffect = jest.fn();
+    const { unmount, rerender } = render(
+      <EffectsTestComponent enabled={false} onEffect={onEffect} />
+    );
+    rerender(<EffectsTestComponent enabled={true} onEffect={onEffect} />);
+    expect(onEffect).toHaveBeenCalledTimes(1);
+    unmount();
+  });
+});
+
+describe('useLayoutEffectAfterMount(cb, changes)', () => {
+  it('should execute task after mount', () => {
+    const onLayoutEffect = jest.fn();
+    const { unmount, rerender } = render(
+      <EffectsTestComponent enabled={false} onLayoutEffect={onLayoutEffect} />
+    );
+    rerender(
+      <EffectsTestComponent enabled={true} onLayoutEffect={onLayoutEffect} />
+    );
+    expect(onLayoutEffect).toHaveBeenCalledTimes(1);
+    unmount();
+  });
+});