CustomHooks.md

Custom React Hooks

useForm

import {useState} from 'react';

export const useForm = () => {
  const [values, setValues] = useState(initialValues);
  
  return [
    values, 
    e => {
      setValues({
        ...values,
        [e.target.name]: e.target.value
      });
    }
}

useFetch

import {useEffect} from 'react';

export const useFetch = (url) => {
  const [state, setState] = useState({ data: null, loading: true })

  useEffect(() => {
    setState(stat => ({ data: state.data, loading: true }));
  
    const fetchData = async () => {
      const response = await fetch(url);
      const data = response.json()
      setState({ data, loading: false });
    }
    
    fetchData()
  }, [url, setState]);
  
  return state
  
}