What Are React Hooks? Complete Guide With Examples

Hooks are functions introduced in React 16.8 that allow you to use state and lifecycle features in functional components without using class components.

Common React Hooks

1. useState

Manages local state in functional components.

import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

2. useEffect

Performs side effects like fetching data, updating the DOM, or subscribing to events.

import React, { useState, useEffect } from "react";

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  return <h2>Seconds: {seconds}</h2>;
}

3. useRef

Access DOM elements directly or store mutable variables.

import React, { useRef } from "react";

function InputFocus() {
  const inputRef = useRef();

  const handleFocus = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={handleFocus}>Focus Input</button>
    </div>
  );
}

Why Hooks Are Useful

Avoid class components
Reuse stateful logic with custom hooks
Simplify code and improve readability
Handle side effects cleanly

Conclusion

Hooks revolutionized React development by enabling state and lifecycle management in functional components, making code cleaner and reusable.

Citations

https://savanka.com/category/learn/react/
https://www.w3schools.com/REACT/DEFAULT.ASP