diff --git a/.changeset/mighty-steaks-shave.md b/.changeset/mighty-steaks-shave.md new file mode 100644 index 00000000..263a2b23 --- /dev/null +++ b/.changeset/mighty-steaks-shave.md @@ -0,0 +1,5 @@ +--- +"@nf-team/react": minor +--- + +feat(hook): useUpdateEffect, useIsFirstRender hook 구현 diff --git a/packages/react/src/hooks/index.ts b/packages/react/src/hooks/index.ts index 1b455870..ab4afa7e 100644 --- a/packages/react/src/hooks/index.ts +++ b/packages/react/src/hooks/index.ts @@ -1,9 +1,11 @@ export { default as useActionKeyEvent } from './useActionKeyEvent'; export { default as useBoolean } from './useBoolean'; export { default as useDebounce } from './useDebounce'; +export { default as useIsFirstRender } from './useIsFirstRender'; export { default as useIsMounted } from './useIsMounted'; export { default as useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'; export { default as useLessThenScrollY } from './useLessThenScrollY'; export { default as useResizeViewportHeight } from './useResizeViewportHeight'; export { default as useThrottleCallback } from './useThrottleCallback'; export { default as useTimeout } from './useTimeout'; +export { default as useUpdateEffect } from './useUpdateEffect'; diff --git a/packages/react/src/hooks/useIsFirstRender.ts b/packages/react/src/hooks/useIsFirstRender.ts new file mode 100644 index 00000000..b0ce5b80 --- /dev/null +++ b/packages/react/src/hooks/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; diff --git a/packages/react/src/hooks/useUpdateEffect.ts b/packages/react/src/hooks/useUpdateEffect.ts new file mode 100644 index 00000000..064bd623 --- /dev/null +++ b/packages/react/src/hooks/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(); + + // eslint-disable-next-line consistent-return + useEffect(() => { + if (!isFirst) { + return effect(); + } + }, deps); +} + +export default useUpdateEffect;