Custom Hooks

Explain Me React Hooks

React Hooks are functions that let you use state and other React features without writing a class. Introduced in React 16.8, they enable functional components to handle logic like state management, lifecycle events, and side effects.

What is Need of Custom Hooks ?

Custom React Hooks allow you to extract and reuse logic across multiple components. They help to keep components clean and reduce duplication by encapsulating stateful logic into a function. Custom Hooks follow the same rules as built-in Hooks (e.g., they can use other Hooks like useState, useEffect, etc.).

Show Me the Code :

import React, { useState } from 'react';


// Custom Counter Hooks
const useCounter = (initialValue = 0) => {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(value=>value + 1);
  const decrement = () => setCount(value=>value - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
};
export default useCounter;

import useCounter from './useCounter';

const Counter = () => {

  // Using Counter Hooks
  const { count, increment, decrement, reset } = useCounter();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
};

Rules for Custom Hooks

Only call hooks at the top level: Don’t call hooks inside loops, conditions, or nested functions.

Only call hooks from React functions: Hooks should be used in functional components or other custom hooks.

Comments

[Mykhailo Toporkov 🇺🇦]

This could result in major bugs and weird behavior in your application:

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

Do this instead:

  const increment = () => setCount(prev => prev + 1);
  const decrement = () => setCount(prev => prev - 1);

[Vaibhav Shukla]

Thanks