import { useState } from 'react';

function useToggle(defaultValue = false) {
  const [value, setValue] = useState(!!defaultValue);
  const toggle = () => setValue(v => !v);
  const on = () => setValue(true);
  const off = () => setValue(false);
  return { value, toggle, on, off };
}

export default useToggle;

import useToggle from './useToggle';

function ToggleExample() {
  const { value: show, toggle } = useToggle(true);
  return (
    <div>
      <h4>toggle custom hook</h4>
      <button className='btn' onClick={toggle}>toggle</button>
      {show && <h4>some stuff</h4>}
    </div>
  );
}

export default ToggleExample;

import { useState, useEffect } from 'react';

function useFetch(url, options = {}) {
  const [isLoading, setIsLoading] = useState(true);
  const [isError,   setIsError]   = useState(false);
  const [data,      setData]      = useState(null);

  useEffect(() => {
    if (!url) { setIsError(true); setIsLoading(false); return; }
    const ctrl = new AbortController();

    (async () => {
      try {
        const res = await fetch(url, { signal: ctrl.signal, ...options });
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const json = await res.json();
        setData(json);
      } catch (err) {
        if (err.name !== 'AbortError') setIsError(true);
      } finally {
        setIsLoading(false);
      }
    })();

    return () => ctrl.abort();
  }, [url]); // בכוונה תלוי רק ב-url, אפשר להרחיב ל-options אם יציב

  return { isLoading, isError, data };
}

export default useFetch;

⌛ Loading…

import useFetch from './useFetch';

const url = 'https://api.github.com/users/QuincyLarson';

function FetchData() {
  const { isLoading, isError, data: user } = useFetch(url);

  if (isLoading) return <h2>Loading...</h2>;
  if (isError)   return <h2>There was an error...</h2>;

  const { avatar_url, name, company, bio } = user || {};
  return (
    <div>
      <img style={{ width: 150, borderRadius: 25 }} src={avatar_url} alt={name} />
      <h2>{name}</h2>
      {company && <h4>works at {company}</h4>}
      <p>{bio}</p>
    </div>
  );
}

export default FetchData;

import { useState, useEffect } from 'react';

function useFetchPerson(url) {
  const [isLoading, setIsLoading] = useState(true);
  const [isError,   setIsError]   = useState(false);
  const [user,      setUser]      = useState(null);

  useEffect(() => {
    if (!url) { setIsError(true); setIsLoading(false); return; }
    const ctrl = new AbortController();

    (async () => {
      try {
        const res = await fetch(url, { signal: ctrl.signal });
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const json = await res.json();
        setUser(json);
      } catch (err) {
        if (err.name !== 'AbortError') setIsError(true);
      } finally {
        setIsLoading(false);
      }
    })();

    return () => ctrl.abort();
  }, [url]);

  return { isLoading, isError, user };
}

export default useFetchPerson;

⌛ Loading…