useConditionalEffect.md

useConditionalEffect

useConditionalEffect는 조건에 따라 효과를 실행하는 리액트 훅이에요. 이는 단순한 의존성 변경 이상으로 효과가 실행되는 시점을 더 잘 제어할 수 있게 해줘요.

인터페이스

function useConditionalEffect(
  effect: EffectCallback,
  deps: DependencyList,
  condition: (prevDeps: T | undefined, currentDeps: T) => boolean
): void;

파라미터

반환 값

이 훅은 아무 것도 반환하지 않아요.

예시

import { useConditionalEffect } from 'react-simplikit';

function Component() {
  const [count, setCount] = useState(0);

  // 카운트가 증가할 때만 효과를 실행해요
  useConditionalEffect(
    () => {
      console.log(`카운트가 ${count}로 증가했어요`);
    },
    [count],
    (prevDeps, currentDeps) => {
      // 카운트가 정의되었고 증가했을 때만 실행해요
      return prevDeps && currentDeps[0] > prevDeps[0];
    }
  );

  return (
    <button onClick={() => setCount(prev => prev + 1)}>증가: {count}</button>
  );
}