React Hooks

React Hooks are a powerful feature introduced in React 16.8 that let you use state and lifecycle methods in functional components. Before hooks, only class components could use these features, making the code more complex and harder to manage. Hooks changed that by allowing you to “hook into” React features directly inside functional components.

Why Were Hooks Introduced?

Hooks were created to solve three main problems:

1. Reusing Logic: Before hooks, logic reuse was hard and required patterns like Higher-Order Components (HOCs) or Render Props.
2. Complex Components: Class components often became bloated with lifecycle methods and state logic.
3. Mixing Concerns: Different logic (like fetching data and setting up timers) often ended up in the same method like componentDidMount.

Hooks make components cleaner, easier to read, and more modular.

Basic Rules of Hooks

Before using them, remember two important rules:

1. Only call Hooks at the top level – not inside loops, conditions, or nested functions.
2. Only call Hooks from React functions – like functional components or custom hooks.

Commonly Used React Hooks

Here are the most commonly used hooks you’ll encounter:

1. useState

Used to create and manage state in functional components.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // count = state variable, setCount = function to update it

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Think of useState as a way to make your component “remember” information between renders.

2. useEffect

Used for side effects like fetching data, updating the DOM, or setting timers.

import React, { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    console.log("Component mounted");
    
    return () => {
      console.log("Component will unmount");
    };
  }, []);
  
  return <h2>Timer running</h2>;
}

useEffect runs after the component renders. The empty array [] means it runs only once (like componentDidMount).

3. useContext

Used to consume data from React’s Context API without manually passing props down multiple levels.

const ThemeContext = React.createContext("light");

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  const theme = React.useContext(ThemeContext);
  return <div>Current theme: {theme}</div>;
}

Great for sharing global values like themes or authenticated users.

4. useRef

Used to reference a DOM element or persist values across renders without triggering a re-render.

import React, { useRef } from 'react';

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

const focusInput = () => inputRef.current.focus();

return (
<>
<input ref={inputRef} type="text" />
<button onClick={focusInput}>Focus Input</button>
</>
);
}


Think of it as a container that doesn’t change the component’s lifecycle.

5. useMemo and useCallback

Used for performance optimization.

• useMemo: Memoizes the result of a calculation.
• useCallback: Memoizes the function itself to prevent unnecessary re-renders.

const memoizedValue = useMemo(() => expensiveCalculation(a, b), [a, b]);
const memoizedCallback = useCallback(() => handleClick(id), [id]);

Creating Custom Hooks

You can also create your own hooks to extract and reuse logic.

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

const increment = () => setCount((c) => c + 1);
const decrement = () => setCount((c) => c - 1);

return { count, increment, decrement };
}

function Counter() {
const { count, increment, decrement } = useCounter();

return (
<>
<p>{count}</p>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</>
);
}


Custom hooks help keep your code clean and reusable.

Conclusion

React Hooks make functional components as powerful as class components—if not more. They simplify state management, side effects, and logic sharing, all while making your code easier to read and maintain.

If you’re building modern React apps, Hooks are the future—and they’re here to stay.