DEV Community

Cover image for Custom Hooks
Vaibhav Shukla
Vaibhav Shukla

Posted on

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.

Image description

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>
  );
};
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (2)

Collapse
 
cookiemonsterdev profile image
Mykhailo Toporkov πŸ‡ΊπŸ‡¦

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

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
Enter fullscreen mode Exit fullscreen mode

Do this instead:

  const increment = () => setCount(prev => prev + 1);
  const decrement = () => setCount(prev => prev - 1);
Enter fullscreen mode Exit fullscreen mode
Collapse
 
vaibhav_shukla_newsletter profile image
Vaibhav Shukla

Thanks