Hooks in React

React Hooks were introduced in React 16.8 to allow function components to use state and other features that were previously only available in class components. Hooks provide a way to manage state, handle side effects, and reuse logic without writing class components. They enable a cleaner and more functional approach to developing React applications.

useState Hook

The useState hook allows you to add state to function components. It returns an array with two elements: the current state value and a function to update it.

Example:

import React, { useState } from 'react';

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

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

export default Counter;

In this example:

count is the state variable, and its initial value is set to 0.
setCount is the function used to update count.
Clicking the button updates the state using setCount, and the component re-renders with the new state.

useEffect Hook

The useEffect hook lets you perform side effects in function components. It combines the capabilities of componentDidMount, componentDidUpdate, and componentWillUnmount lifecycle methods in class components.

Example:

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

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

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

export default Counter;

In this example:

count is the state variable, and its initial value is set to 0.
setCount is the function used to update count.
Clicking the button updates the state using setCount, and the component re-renders with the new state.

Custom Hooks

Custom hooks allow you to encapsulate and reuse stateful logic across multiple components. A custom hook is simply a JavaScript function whose name starts with use and that calls other hooks.

Example: Custom Hook for Window Width

import { useState, useEffect } from "react";

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setWidth(window.innerWidth);
    };

    window.addEventListener("resize", handleResize);

    // Cleanup function
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  return width;
}

export default useWindowWidth;

You can now use the useWindowWidth hook in any component:

import React from "react";
import useWindowWidth from "./useWindowWidth";

function WindowWidthComponent() {
  const width = useWindowWidth();

  return (
    <div>
      <h1>Window Width: {width}px</h1>
    </div>
  );
}

export default WindowWidthComponent;

In this example, the useWindowWidth custom hook tracks the width of the browser window and updates it when the window is resized. This logic can now be reused in multiple components without duplication.

Rules of Hooks

Hooks have a few important rules to follow to ensure they work correctly:

Only call hooks at the top level: Don’t call hooks inside loops, conditions, or nested functions. This ensures hooks are called in the same order each time a component renders.
Only call hooks from React functions: Call hooks from function components or custom hooks, not regular JavaScript functions or class components.

Example of Incorrect Hook Usage:

// Incorrect
function Component() {
  if (someCondition) {
    const [state, setState] = useState(0); // Don’t do this
  }
}

Example of Correct Hook Usage:

// Correct
function Component() {
  const [state, setState] = useState(0);
  if (someCondition) {
    // Use state here
  }
}

Overview

Introduction to React Hooks

Why Hooks?

Using useState and useEffect Hooks

Custom Hooks and Rules of Hooks

Example: Custom Hook for Window Width

Conclusion