Hooks API Reference

Frontend Hamroun provides a complete hooks API that mirrors React's core hooks with additional performance optimizations.

useState

Description

useState is a Hook that lets you add state to your function components. It returns a stateful value and a function to update it.

Syntax

const [state, setState] = useState(initialState);

Example Code

playground.jsx

Try It Live

You clicked 0 times

Best Practices

Do

Use functional updates for state that depends on previous state
Group related state with objects or use multiple state variables

Don't

Modify state directly without using the setter function
Rely on previous state without using functional updates

Usage Metrics

98%

Adoption Rate

4.9/5

Developer Rating

High

Learning Curve

Custom Hooks

Custom Hooks let you extract component logic into reusable functions. Here are some useful custom hooks you can use in your Frontend Hamroun applications:

useTimeout

A hook for handling setTimeout with automatic cleanup

playground.jsx

function useTimeout(callback, delay) {
  const callbackRef = useRef(callback);
  
  // Remember the latest callback
  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);
  
  useEffect(() => {
    if (delay !== null) {
      const id = setTimeout(() => callbackRef.current(), delay);
      return () => clearTimeout(id);
    }
  }, [delay]);
}

useLocalStorage

A hook for persisting state in localStorage

playground.jsx

function useLocalStorage(key, initialValue) {
  // Get stored value or use initialValue
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });
  
  // Return a wrapped version of useState's setter
  const setValue = (value) => {
    try {
      // Allow value to be a function
      const valueToStore =
        value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.error(error);
    }
  };
  
  return [storedValue, setValue];
}

useOnScreen

A hook for detecting when an element is visible on screen

playground.jsx

function useOnScreen(ref, threshold = 0.1) {
  const [isVisible, setIsVisible] = useState(false);
  
  useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        setIsVisible(entry.isIntersecting);
      },
      { threshold }
    );
    
    if (ref.current) {
      observer.observe(ref.current);
    }
    
    return () => {
      if (ref.current) {
        observer.unobserve(ref.current);
      }
    };
  }, [ref, threshold]);
  
  return isVisible;
}

useFetch

A hook for handling API requests with loading and error states

playground.jsx

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  
  useEffect(() => {
    const abortController = new AbortController();
    
    async function fetchData() {
      try {
        setLoading(true);
        const response = await fetch(url, {
          signal: abortController.signal
        });
        
        if (!response.ok) {
          throw new Error(`Network error: ${response.status}`);
        }
        
        const json = await response.json();
        setData(json);
        setError(null);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err.message);
          setData(null);
        }
      } finally {
        setLoading(false);
      }
    }
    
    fetchData();
    
    return () => {
      abortController.abort();
    };
  }, [url]);
  
  return { data, loading, error };
}

Explore More Custom Hooks

Hooks FAQ

Use useState for simple state management and useReducer for complex state logic, especially when state transitions depend on the previous state or when multiple sub-values are related.

In development mode with React.StrictMode enabled, useEffect runs twice to help detect side effects that need cleanup. This only happens in development, not production.

No, hooks should always be called at the top level of your components, not inside conditionals, loops, or nested functions. This ensures the hooks are called in the same order each time.

useMemo memoizes a computed value, while useCallback memoizes a function. Use useMemo when you want to avoid recalculating expensive values, and useCallback when you want to prevent function recreation that might cause child components to re-render unnecessarily.

Next Steps

Now that you've learned about Frontend Hamroun's hooks API, explore these related resources:

Menu

Hooks API Reference

useState

Description

Syntax

Example Code

Try It Live

Best Practices

Do

Don't

Usage Metrics

Custom Hooks

useTimeout

useLocalStorage

useOnScreen

useFetch

Hooks FAQ

When should I use useState vs useReducer?

Why does my useEffect run twice in development?

Can I call hooks conditionally?

What's the difference between useMemo and useCallback?

Next Steps

Components

Performance

Testing