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.
Top comments (2)
This could result in major bugs and weird behavior in your application:
Do this instead:
Thanks