feat: implement useMountEffect and useUnmountEffect hooks

src/useFirstMountState.ts

@@ -1,5 +1,8 @@
 import { useEffect, useRef } from 'react';
 
+/**
+ * Returns boolean that is `true` only on first render
+ */
 export function useFirstMountState(): boolean {
   const isFirstMount = useRef(true);
 

src/useMountEffect.ts

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+
+/**
+ * Run effect only when component is first mounted.
+ *
+ * @param fn effector to run on nmount
+ */
+export function useMountEffect(fn: () => void): void {
+  useEffect(() => {
+    fn();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}

src/useUnmountEffect.ts

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+
+/**
+ * Run effect only when component is unmounted.
+ *
+ * @param fn effector to run on unmount
+ */
+export function useUnmountEffect(fn: () => void): void {
+  useEffect(
+    () => () => {
+      fn();
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+}

tests/dom/useMountEffect.test.ts

@@ -0,0 +1,24 @@
+import { renderHook } from '@testing-library/react-hooks/dom';
+import { useMountEffect } from '../../src/useMountEffect';
+
+describe('useMountEffect', () => {
+  it('should call effector only on first render', () => {
+    const spy = jest.fn();
+
+    const { result, rerender, unmount } = renderHook(() => useMountEffect(spy));
+
+    expect(result.current).toBe(undefined);
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    rerender();
+    rerender();
+    rerender();
+    rerender();
+
+    expect(spy).toHaveBeenCalledTimes(1);
+
+    unmount();
+
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+});

tests/dom/useUnmountEffect.test.ts

@@ -0,0 +1,24 @@
+import { renderHook } from '@testing-library/react-hooks/dom';
+import { useUnmountEffect } from '../../src/useUnmountEffect';
+
+describe('useUnmountEffect', () => {
+  it('should call effector only when component unmounted', () => {
+    const spy = jest.fn();
+
+    const { result, rerender, unmount } = renderHook(() => useUnmountEffect(spy));
+
+    expect(result.current).toBe(undefined);
+    expect(spy).toHaveBeenCalledTimes(0);
+
+    rerender();
+    rerender();
+    rerender();
+    rerender();
+
+    expect(spy).toHaveBeenCalledTimes(0);
+
+    unmount();
+
+    expect(spy).toHaveBeenCalledTimes(1);
+  });
+});

tests/ssr/useMountEffect.test.ts

@@ -0,0 +1,13 @@
+import { renderHook } from '@testing-library/react-hooks/server';
+import { useMountEffect } from '../../src/useMountEffect';
+
+describe('useMountEffect', () => {
+  it('should call effector only on first render', () => {
+    const spy = jest.fn();
+
+    const { result } = renderHook(() => useMountEffect(spy));
+
+    expect(result.current).toBe(undefined);
+    expect(spy).toHaveBeenCalledTimes(0);
+  });
+});

tests/ssr/useUnmountEffect.test.ts

@@ -0,0 +1,13 @@
+import { renderHook } from '@testing-library/react-hooks/server';
+import { useUnmountEffect } from '../../src/useUnmountEffect';
+
+describe('useUnmountEffect', () => {
+  it('should call effector only when component unmounted', () => {
+    const spy = jest.fn();
+
+    const { result } = renderHook(() => useUnmountEffect(spy));
+
+    expect(result.current).toBe(undefined);
+    expect(spy).toHaveBeenCalledTimes(0);
+  });
+});