Introduction to React Hooks

What Are React Hooks?

React Hooks are functions that let you use state and other React features in functional components. Prior to hooks, functional components were stateless, meaning they could only render UI but could not hold or manage internal state or lifecycle events. Hooks were introduced in React 16.8 to solve this limitation and allow functional components to be as powerful as class components.

Hooks provide a cleaner and simpler approach to managing component logic. They allow developers to write reusable, composable, and maintainable code without needing to convert functional components into classes.

Why Hooks Were Introduced

Hooks were introduced to solve several problems in React development:

1. Complexity in Class Components
   Managing state and lifecycle methods in class components often led to complicated code, especially in large components. Multiple lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount could result in duplicated logic.
2. Code Reusability Issues
   Logic sharing between class components required patterns like Higher-Order Components (HOCs) or Render Props, which often added unnecessary complexity.
3. Separation of Concerns
   In class components, related logic is often split across multiple lifecycle methods. Hooks allow grouping related logic together, making code easier to read and maintain.
4. Simplifying Functional Components
   Before hooks, functional components could not manage state or side effects. Hooks allow developers to leverage state, context, and other React features directly in functional components.

In essence, hooks make React code more predictable, concise, and composable.

---

Rules of Hooks

React has strict rules for using hooks. Following these rules ensures that your components work correctly and React can manage their internal state properly.

1. Only Call Hooks at the Top Level

Hooks should not be called inside loops, conditions, or nested functions. They should always be called at the top level of your functional component.

Incorrect Usage:

function Example({ condition }) {
  if (condition) {
const [count, setCount] = React.useState(0); // ❌
  }
  return <div>Example</div>;
}

Correct Usage:

function Example({ condition }) {
  const [count, setCount] = React.useState(0); // ✅
  
  if (condition) {
console.log(count);
  }
  
  return <div>Example</div>;
}

2. Only Call Hooks from React Functions

Hooks should only be used inside:

• Functional components
• Custom hooks

They should not be called in regular JavaScript functions, class components, or event handlers outside of a hook.

Incorrect Usage:

function regularFunction() {
  const [count, setCount] = React.useState(0); // ❌
}

Correct Usage:

function Counter() {
  const [count, setCount] = React.useState(0); // ✅
  return <div>{count}</div>;
}

3. Use Built-In Hooks or Custom Hooks Only

React provides several built-in hooks (like useState, useEffect, useContext), and you can create custom hooks. Using hooks inappropriately or mixing them with other patterns can break component logic.

---

Benefits of Hooks Over Class Components

Hooks bring multiple advantages compared to class components:

1. Cleaner and Shorter Code

Functional components with hooks are generally more concise than class components. There is no need for this keyword or constructor methods.

Class Component Example:

class Counter extends React.Component {
  constructor(props) {
super(props);
this.state = { count: 0 };
  }

  increment = () => {
this.setState({ count: this.state.count + 1 });
  }

  render() {
return (
  <div>
    <p>Count: {this.state.count}</p>
    <button onClick={this.increment}>Increment</button>
  </div>
);
  }
}

Functional Component with Hooks Example:

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

  const increment = () => setCount(count + 1);

  return (
<div>
  <p>Count: {count}</p>
  <button onClick={increment}>Increment</button>
</div>
  );
}

Notice how the functional version is shorter and easier to read.

2. Reusable Logic with Custom Hooks

Hooks allow you to extract reusable logic into custom hooks, avoiding repetition across components.

function useCounter(initialValue = 0) {
  const [count, setCount] = React.useState(initialValue);
  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  return { count, increment, decrement };
}

function Counter() {
  const { count, increment, decrement } = useCounter();
  return (
<div>
  <p>Count: {count}</p>
  <button onClick={increment}>+</button>
  <button onClick={decrement}>-</button>
</div>
  );
}

This pattern simplifies state management and promotes code reuse.

3. Easier Testing

Functional components with hooks are simpler to test than class components because they are just functions. You can call hooks in isolation in testing utilities.

4. Better Composition

Hooks enable composing multiple pieces of logic in the same component. For example, you can use multiple useState and useEffect hooks to manage different aspects of a component without combining unrelated logic in a single lifecycle method.

---

Simple Example of a Hook in a Functional Component

Let’s walk through a simple example using the useState hook.

Counter Component

import React, { useState } from 'react';

function Counter() {
  // Declare a state variable "count" with initial value 0
  const [count, setCount] = useState(0);

  // Function to increment count
  const increment = () => setCount(count + 1);

  // Function to decrement count
  const decrement = () => setCount(count - 1);

  return (
<div>
  <h2>Counter Example</h2>
  <p>Current Count: {count}</p>
  <button onClick={increment}>Increment</button>
  <button onClick={decrement}>Decrement</button>
</div>
  );
}

export default Counter;

Explanation:

• useState(0) declares a state variable count with an initial value of 0.
• setCount updates the state and automatically triggers a re-render.
• Functions increment and decrement handle button clicks, modifying the state.
• No class or this keyword is required.

---

Using Multiple State Variables

Hooks allow multiple useState calls for different pieces of state, instead of combining all state in a single object as in class components.

function UserProfile() {
  const [name, setName] = useState("Alice");
  const [age, setAge] = useState(25);

  return (
<div>
  <p>Name: {name}</p>
  <p>Age: {age}</p>
  <button onClick={() => setAge(age + 1)}>Increase Age</button>
</div>
  );
}

Benefits:

• Each state variable is independent
• No need to merge objects manually with this.setState

---

Using useEffect for Side Effects

The useEffect hook allows you to perform side effects in functional components, replacing lifecycle methods like componentDidMount and componentDidUpdate.

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

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

  useEffect(() => {
const interval = setInterval(() => setSeconds(prev => prev + 1), 1000);
return () => clearInterval(interval); // Cleanup
  }, []); // Empty dependency array runs effect only once

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

Key Points:

• The cleanup function avoids memory leaks.
• Dependency arrays control when the effect runs.
• useEffect replaces multiple lifecycle methods in class components.

---

Combining useState and useEffect

Hooks can be combined to fetch data, respond to user interactions, or update the UI dynamically.

function RandomUser() {
  const [user, setUser] = useState(null);

  useEffect(() => {
fetch("https://randomuser.me/api/")
  .then(res => res.json())
  .then(data => setUser(data.results[0]));
  }, []); // Run once on mount

  if (!user) return <p>Loading...</p>;

  return (
&lt;div&gt;
  &lt;p&gt;Name: {user.name.first} {user.name.last}&lt;/p&gt;
  &lt;p&gt;Email: {user.email}&lt;/p&gt;
  &lt;img src={user.picture.thumbnail} alt="user" /&gt;
&lt;/div&gt;
  );
}