React Native Custom Hooks - 파트 1

- useEffectOnce

import { useEffect } from 'react';

export function useEffectOnce(cb) {
  useEffect(cb, []);
}

예시

import { useEffectOnce } from './hooks';

useEffectOnce(() => {
  console.log('Will be executed at first render only');
});

-useUpdateEffect

import { useEffect, useRef } from 'react';

export function useUpdateEffect(callback, dependencies) {
  const firstRenderRef = useRef(true);

  useEffect(() => {
    if (firstRenderRef.current) {
      firstRenderRef.current = false;
      return;
    }
    return callback();
  }, dependencies);
}

예시

import { useState } from 'react';
import { useUpdateEffect } from './hooks';

const [counter, setCounter] = useState(5);

useUpdateEffect(() => {
  console.log('Will be executed whenever the dependency updates, But won\'t be executed at first render');
}, [counter]);

- useToggle

export function useToggle(defaultValue = false) {
  const [value, setValue] = useState(defaultValue);

  const toggleValue = useCallback(() => setValue((value) => !value), []);

  return [value, toggleValue];
}

예시

import { useToggle } from './hooks';

const [isActive, setIsActive] = useToggle(false);

- useTimeout

import { useCallback, useEffect, useRef } from 'react';

export function useTimeout(callback, delay) {
  const callbackRef = useRef(callback);
  const timeoutRef = useRef(null);

  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

  const set = useCallback(() => {
    timeoutRef.current = setTimeout(() => callbackRef.current(), delay);
  }, [delay]);

  const clear = useCallback(() => {
    timeoutRef.current && clearTimeout(timeoutRef.current);
  }, []);

  useEffect(() => {
    set();
    return clear;
  }, [delay, set, clear]);

  const reset = useCallback(() => {
    clear();
    set();
  }, [clear, set]);

  return { reset, clear };
}

예시

import { useState } from 'react';
import { useTimeout } from './hooks';

const [counter, setCounter] = useState(5);
const { clear, reset } = useTimeout(() => setCounter(0), 1000);

// counter value is 5, and after 1000ms the value will be changed to 0 as we can see, and we also have 2 functions, clear that clears Timeout, and a Reset function.

- 디바운스 사용

import { useEffect } from 'react';
import { useTimeout } from './useTimeout';

export function useDebounce(callback, delay, dependencies) {
  const { reset, clear } = useTimeout(callback, delay);
  useEffect(reset, [...dependencies, reset]);
  useEffect(clear, []);
}

예시

import { useState } from 'react';
import { useDebounce } from './hooks';

const [term, setTerm] = useState('');
useDebounce(async () => await searchAutoComplete(term), 1000, [term]);

// Typing in a search field, and we want to send a search auto complete request that returns array of auto complete words, but we want to send this request only after user stops typing for 1000ms