Merge pull request #60 from juliencrn/feature/add-lifecycle-hooks

feat(hooks): Create lifecycles hooks

README.md

@@ -54,6 +54,7 @@ If you'd like to submit new post ideas, improve existing posts, or change anythi
 - [`useCounter()`](https://usehooks-ts.com/react-hook/use-counter)
 - [`useDarkMode()`](https://usehooks-ts.com/react-hook/use-dark-mode)
 - [`useDebounce()`](https://usehooks-ts.com/react-hook/use-debounce)
+- [`useEffectOnce()`](https://usehooks-ts.com/react-hook/use-effect-once)
 - [`useElementSize()`](https://usehooks-ts.com/react-hook/use-element-size)
 - [`useEventListener()`](https://usehooks-ts.com/react-hook/use-event-listener)
 - [`useFetch()`](https://usehooks-ts.com/react-hook/use-fetch)
@@ -62,6 +63,7 @@ If you'd like to submit new post ideas, improve existing posts, or change anythi
 - [`useIntersectionObserver()`](https://usehooks-ts.com/react-hook/use-intersection-observer)
 - [`useInterval()`](https://usehooks-ts.com/react-hook/use-interval)
 - [`useIsClient()`](https://usehooks-ts.com/react-hook/use-is-client)
+- [`useIsFirstRender()`](https://usehooks-ts.com/react-hook/use-is-first-render)
 - [`useIsMounted()`](https://usehooks-ts.com/react-hook/use-is-mounted)
 - [`useLocalStorage()`](https://usehooks-ts.com/react-hook/use-local-storage)
 - [`useLockedBody()`](https://usehooks-ts.com/react-hook/use-locked-body)
@@ -73,6 +75,7 @@ If you'd like to submit new post ideas, improve existing posts, or change anythi
 - [`useSsr()`](https://usehooks-ts.com/react-hook/use-ssr)
 - [`useStep()`](https://usehooks-ts.com/react-hook/use-step)
 - [`useTimeout()`](https://usehooks-ts.com/react-hook/use-timeout)
+- [`useUpdateEffect()`](https://usehooks-ts.com/react-hook/use-update-effect)
 - [`useWindowSize()`](https://usehooks-ts.com/react-hook/use-window-size)
 
 <!-- HOOKS:END -->

lib/README.md

@@ -21,6 +21,7 @@ npm i usehooks-ts
 - [`useCounter()`](https://usehooks-ts.com/react-hook/use-counter)
 - [`useDarkMode()`](https://usehooks-ts.com/react-hook/use-dark-mode)
 - [`useDebounce()`](https://usehooks-ts.com/react-hook/use-debounce)
+- [`useEffectOnce()`](https://usehooks-ts.com/react-hook/use-effect-once)
 - [`useElementSize()`](https://usehooks-ts.com/react-hook/use-element-size)
 - [`useEventListener()`](https://usehooks-ts.com/react-hook/use-event-listener)
 - [`useFetch()`](https://usehooks-ts.com/react-hook/use-fetch)
@@ -29,6 +30,7 @@ npm i usehooks-ts
 - [`useIntersectionObserver()`](https://usehooks-ts.com/react-hook/use-intersection-observer)
 - [`useInterval()`](https://usehooks-ts.com/react-hook/use-interval)
 - [`useIsClient()`](https://usehooks-ts.com/react-hook/use-is-client)
+- [`useIsFirstRender()`](https://usehooks-ts.com/react-hook/use-is-first-render)
 - [`useIsMounted()`](https://usehooks-ts.com/react-hook/use-is-mounted)
 - [`useLocalStorage()`](https://usehooks-ts.com/react-hook/use-local-storage)
 - [`useLockedBody()`](https://usehooks-ts.com/react-hook/use-locked-body)
@@ -40,6 +42,7 @@ npm i usehooks-ts
 - [`useSsr()`](https://usehooks-ts.com/react-hook/use-ssr)
 - [`useStep()`](https://usehooks-ts.com/react-hook/use-step)
 - [`useTimeout()`](https://usehooks-ts.com/react-hook/use-timeout)
+- [`useUpdateEffect()`](https://usehooks-ts.com/react-hook/use-update-effect)
 - [`useWindowSize()`](https://usehooks-ts.com/react-hook/use-window-size)
 
 <!-- HOOKS:END -->

lib/src/index.ts

@@ -3,6 +3,7 @@ export * from './useCopyToClipboard'
 export * from './useCounter'
 export * from './useDarkMode'
 export * from './useDebounce'
+export * from './useEffectOnce'
 export * from './useElementSize'
 export * from './useEventListener'
 export * from './useFetch'
@@ -11,6 +12,7 @@ export * from './useImageOnLoad'
 export * from './useIntersectionObserver'
 export * from './useInterval'
 export * from './useIsClient'
+export * from './useIsFirstRender'
 export * from './useIsMounted'
 export * from './useLocalStorage'
 export * from './useLockedBody'
@@ -22,4 +24,5 @@ export * from './useScript'
 export * from './useSsr'
 export * from './useStep'
 export * from './useTimeout'
+export * from './useUpdateEffect'
 export * from './useWindowSize'

lib/src/useEffectOnce/index.ts

@@ -0,0 +1,2 @@
+export { default as useEffectOnce } from './useEffectOnce'
+export * from './useEffectOnce'

lib/src/useEffectOnce/useEffectOnce.test.ts

@@ -0,0 +1,16 @@
+import { renderHook } from '@testing-library/react-hooks/native'
+
+import useEffectOnce from './useEffectOnce'
+
+describe('use effect once()', () => {
+  test('should be triggered only once', () => {
+    const effect = jest.fn()
+    const { rerender } = renderHook(() => useEffectOnce(effect))
+
+    expect(effect).toHaveBeenCalledTimes(1)
+
+    rerender()
+
+    expect(effect).toHaveBeenCalledTimes(1)
+  })
+})

lib/src/useEffectOnce/useEffectOnce.ts

@@ -0,0 +1,8 @@
+import { EffectCallback, useEffect } from 'react'
+
+function useEffectOnce(effect: EffectCallback) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useEffect(effect, [])
+}
+
+export default useEffectOnce

lib/src/useIsFirstRender/index.ts

@@ -0,0 +1,2 @@
+export { default as useIsFirstRender } from './useIsFirstRender'
+export * from './useIsFirstRender'

lib/src/useIsFirstRender/useIsFirstRender.test.ts

@@ -0,0 +1,15 @@
+import { renderHook } from '@testing-library/react-hooks/native'
+
+import useIsFirstRender from './useIsFirstRender'
+
+describe('use is first render()', () => {
+  test('should return true at the first render, next false', () => {
+    const { result, rerender } = renderHook(() => useIsFirstRender())
+
+    expect(result.current).toBe(true)
+
+    rerender()
+
+    expect(result.current).toBe(false)
+  })
+})

lib/src/useIsFirstRender/useIsFirstRender.ts

@@ -0,0 +1,15 @@
+import { useRef } from 'react'
+
+function useIsFirstRender(): boolean {
+  const isFirst = useRef(true)
+
+  if (isFirst.current) {
+    isFirst.current = false
+
+    return true
+  }
+
+  return isFirst.current
+}
+
+export default useIsFirstRender

lib/src/useUpdateEffect/index.ts

@@ -0,0 +1,2 @@
+export { default as useUpdateEffect } from './useUpdateEffect'
+export * from './useUpdateEffect'

lib/src/useUpdateEffect/useUpdateEffect.test.ts

@@ -0,0 +1,16 @@
+import { renderHook } from '@testing-library/react-hooks/native'
+
+import useUpdateEffect from './useUpdateEffect'
+
+describe('use update effect()', () => {
+  test('the callback function should have been called on update', () => {
+    const effect = jest.fn()
+    const { rerender } = renderHook(() => useUpdateEffect(effect))
+
+    expect(effect).not.toHaveBeenCalled()
+
+    rerender()
+
+    expect(effect).toHaveBeenCalledTimes(1)
+  })
+})

lib/src/useUpdateEffect/useUpdateEffect.ts

@@ -0,0 +1,16 @@
+import { DependencyList, EffectCallback, useEffect } from 'react'
+
+import { useIsFirstRender } from '../useIsFirstRender'
+
+function useUpdateEffect(effect: EffectCallback, deps?: DependencyList) {
+  const isFirst = useIsFirstRender()
+
+  useEffect(() => {
+    if (!isFirst) {
+      return effect()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps)
+}
+
+export default useUpdateEffect