en/docs/hooks

Hooks are a fundamental concept in modern web development, allowing developers to add reusable and modular functionality to their applications. In this section, we'll explore the concept of hooks, their usage, and how they can be leveraged to enhance your web applications.

What are Hooks?

Hooks are JavaScript functions that allow you to "hook into" React state and lifecycle features from function components. They were introduced in React 16.8 to enable functional components to use state and other React features without writing a class.

Common Hooks

useState: Allows you to add state to function components.
useEffect: Enables you to perform side effects in function components.
useContext: Accesses the value of a React context.
useReducer: Provides state logic that is more predictable than useState and is suitable for complex state logic that involves multiple sub-values or when the next state depends on the previous one.

Example

Here's a simple example using useState and useEffect to create a counter:

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

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // Only re-run the effect if count changes

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

For more information on hooks, you can check out our Hooks Documentation.