Reusable React Hooks

hooks.js

import { useState, useEffect } from 'react'
 
/**
 * Examples of Reusable Custom Hooks
 * - useLodash https://github.com/chantastic/use-lodash
 * - useEvents https://github.com/sandiiarov/use-events
 * - list of hooks https://github.com/streamich/react-use
 * - awesome hooks https://github.com/rehooks/awesome-react-hooks
 */

export const useToggle = (initialState = false) => {
  const [state, setState] = useState(initialState);
  const toggle = () => setState(state => !state);
  return [state, toggle];
}

export const useFetch = async ({ url, defaultData = null }) => {
  const [data, setData] = useState(defaultData)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    try {
      const res = await fetch(url)
      const json = await res.json()
      setData(json)
      setLoading(false)
    } catch (err) {
      setError(err)
      setLoading(false)
    }
  }, [])

  return [data, loading, error]
}