DEV Community

Cover image for Custom Hooks
Vaibhav Shukla
Vaibhav Shukla

Posted on

1 1

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.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

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

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up