react hooks overview

React Hooks are a powerful tool in the React ecosystem that allow you to "hook into" state and lifecycle methods from functional components. This guide provides an overview of the most commonly used hooks, when to use them, and how they can be used to simplify your code.

useState Hook

The useState hook is used to add state to functional components. It allows you to declare a mutable state variable and update it by re-rendering the component.

import React, { useState } from 'react';

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

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

In this example, useState is used to create a state variable count and an update function setCount. When the button is clicked, the setCount function is called with the new count value.

useEffect Hook

The useEffect hook is used to handle side effects in functional components. It allows you to perform actions after rendering or before unmounting the component.

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

function FetchData() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? (
        <p>Data: {data.message}</p>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

In this example, useEffect is used to fetch data from an API when the component mounts. The effect function is called with an empty dependency array ([]), which means it will only run once.

useMemo Hook

The useMemo hook is used to memoize values in functional components. It allows you to cache expensive computations and reuse them instead of recalculating them on every render.

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

function ComplexCalculation() {
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);

  const result = useMemo(() => calculate(x, y), [x, y]);

  return (
    <div>
      <p>Result: {result}</p>
      <button onClick={() => setX(x + 1)}>Increment X</button>
      <button onClick={() => setY(y + 1)}>Increment Y</button>
    </div>
  );
}

function calculate(x, y) {
  // Simulate an expensive calculation
  return x * y;
}

In this example, useMemo is used to memoize the result of the calculate function. The dependency array [x, y] means that the effect will only be recalculated when either x or y changes.

useCallback Hook

The useCallback hook is similar to useMemo, but it's used for memoizing functions instead of values.

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

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

  const onClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

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

In this example, useCallback is used to memoize the onClick function. The dependency array [count] means that the effect will only be recalculated when count changes.

Custom Hooks

Custom hooks are reusable functions that use other hooks to provide a specific functionality. They allow you to extract logic from your components and reuse it across multiple components.

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => setError(error));
  }, [url]);

  return { data, error };
}

In this example, useFetch is a custom hook that uses useState and useEffect to fetch data from an API. It returns the fetched data and any errors that occurred.

Conclusion

React Hooks provide a powerful way to manage state and side effects in functional components. By using hooks like useState, useEffect, `