DEV Community

Cover image for React Native Custom Hooks - Part 1
Anas Nabil
Anas Nabil

Posted on • Updated on

React Native Custom Hooks - Part 1

- useEffectOnce

import { useEffect } from 'react';

export function useEffectOnce(cb) {
  useEffect(cb, []);
}
Enter fullscreen mode Exit fullscreen mode

Example

import { useEffectOnce } from './hooks';

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

- 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);
}
Enter fullscreen mode Exit fullscreen mode

Example

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]);
Enter fullscreen mode Exit fullscreen mode

- useToggle

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

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

  return [value, toggleValue];
}
Enter fullscreen mode Exit fullscreen mode

Example

import { useToggle } from './hooks';

const [isActive, setIsActive] = useToggle(false);
Enter fullscreen mode Exit fullscreen mode

- 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 };
}
Enter fullscreen mode Exit fullscreen mode

Example

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.
Enter fullscreen mode Exit fullscreen mode

- useDebounce

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, []);
}
Enter fullscreen mode Exit fullscreen mode

Example

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
Enter fullscreen mode Exit fullscreen mode

Top comments (0)