Previous

What is a Hook?

  • A hook in React is a special function that allows functional components to use features that were previously exclusive to class components.
  • Introduced in React 16.8 as a way to handle stateful logic and side effects in functional components.

Purpose

  • Enables the use of state, context, and other React features in functional components.
  • Provides a way to manage component logic and side effects without using class components.

Key Hooks

  • useState: Manages local state within functional components.
  • useEffect: Handles side effects like data fetching and subscriptions.
  • useContext: Accesses the value of a React context within a component.
  • useReducer: Manages complex state logic in a more structured way.

Benefits

  • Simplifies and modularizes component logic.
  • Improves code readability and maintainability.
  • Facilitates the use of state and lifecycle features in functional components.

Example - useState

import React, { useState } from 'react';

const ExampleComponent = () => {
  const [count, setCount] = useState(0);

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

Example - useEffect

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

const DataFetchingComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };

    fetchData();
  }, []);

  return (
    <div>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};
Previous