Skip to main content

Exercise: Custom Hooks Library

Objective​

Create a collection of reusable custom hooks.

Hooks to Implement​

1. useToggle​

const [isOpen, toggle, setIsOpen] = useToggle(false);

2. useLocalStorage​

const [value, setValue] = useLocalStorage('key', initialValue);

3. useDebounce​

const debouncedValue = useDebounce(searchTerm, 500);

4. useFetch​

const { data, loading, error, refetch } = useFetch(url);

5. useWindowSize​

const { width, height } = useWindowSize();

6. useOnClickOutside​

useOnClickOutside(ref, () => setIsOpen(false));

7. usePrevious​

const prevValue = usePrevious(currentValue);

8. useInterval​

useInterval(() => console.log('tick'), 1000);

Bonus Hooks​

  • useMediaQuery
  • useAsync
  • useForm
  • useWebSocket
  • useIntersectionObserver

Testing​

Write tests for each hook using @testing-library/react-hooks

Time Estimate​

4-5 hours