Hooks
Sridhar Raj P
🚀 On a mission to teach 1 million students | Developer & Mentor | 7,850+ Students 💜 | Material UI | JavaScript | React JS | Redux | React Native | Python | Java | Springboot | MySQL | Self-Learner | Problem Solver
What are Hooks in React JS?
Hooks in React allow functional components to manage state and side effects, which were previously only possible in class components. Hooks were introduced in React 16.8 to simplify component logic and improve reusability.
✅ Why Use Hooks?
useState: Permits state management by functional components.
useEffect: Allows side effects to be carried out by functional components, like manual DOM modification, subscriptions, and data fetching.
useRef: Provides a mutable ref object with the provided argument initialized in its.current property.
useContext: Gives a functional component’s users access to the closest context object.
useReducer: An alternative to useState. It accepts a reducer function with the application state, returns the current state paired with a dispatch method.
useMemo: Memorizes a value; that is, it stores the output of a function in a cache and returns it in the event that the inputs remain unchanged.
useCallback: Produces a memoized callback function; that is, it produces a memoized callback that modifies only in the event that one of the dependents is altered.
useLayoutEffect: Similar to useEffect, but it fires synchronously after all DOM mutations.
List of React Hooks
1. Basic Hooks (Most Commonly Used)
2. Additional Hooks
3. Rarely Used Hooks
Detailed Explanation of Common Hooks
1. useState (Manages State)
📌 Syntax: const [state, setState] = useState(initialValue);
✅ Example: Counter App
import React, { useState } from "react";
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>Increase</button>
</div>
);
};
export default Counter;
2. useEffect (Handles Side Effects)
📌 Syntax:
useEffect(() => {
// Side effect code here
}, [dependencies]);
✅ Example: Fetching Data from an API
import React, { useState, useEffect } from "react";
const DataFetch = () => {
const [data, setData] = useState([]);
useEffect(() => {
.then((response) => response.json())
.then((json) => setData(json));
}, []);
return (
<ul>
{data.map((item) => (
<li key={item.id}>{item.title}</li>
))}
</ul>
);
};
export default DataFetch;
3. useContext (Accessing Global State)
📌 Used to avoid prop drilling when passing data between deeply nested components.
✅ Example: Using Context API with useContext
import React, { createContext, useContext } from "react";
const UserContext = createContext();
const Profile = () => {
const user = useContext(UserContext);
return <h2>Welcome, {user}!</h2>;
};
const App = () => {
return (
<UserContext.Provider value="Sridhar">
<Profile />
</UserContext.Provider>
);
};
export default App;
🔹 UserContext.Provider provides a value (Sridhar) that useContext accesses in the Profile component.
4. useReducer (Alternative to useState for Complex State)
📌 Syntax: const [state, dispatch] = useReducer(reducerFunction, initialState);
✅ Example: Counter with useReducer
import React, { useReducer } from "react";
const reducer = (state, action) => {
Recommended by LinkedIn
switch (action.type) {
case "increment":
return { count: state.count + 1 };
case "decrement":
return { count: state.count - 1 };
default:
return state;
}
};
const Counter = () => {
const [state, dispatch] = useReducer(reducer, { count: 0 });
return (
<div>
<h2>Count: {state.count}</h2>
<button onClick={() => dispatch({ type: "increment" })}>+</button>
<button onClick={() => dispatch({ type: "decrement" })}>-</button>
</div>
);
};
export default Counter;
🔹 useReducer is useful for handling complex state logic with multiple state transitions.
5. useRef (Accessing DOM Elements & Persistent Values)
📌 Example: Focusing an Input Field
import React, { useRef } from "react";
const InputFocus = () => {
const inputRef = useRef(null);
const focusInput = () => {
inputRef.current.focus();
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={focusInput}>Focus Input</button>
</div>
);
};
export default InputFocus;
🔹 useRef does not trigger re-renders and is commonly used for managing focus, scroll positions, and persisting values.
6. useMemo (Optimizing Performance)
📌 Prevents unnecessary recalculations in expensive operations.
import React, { useState, useMemo } from "react";
const ExpensiveCalculation = ({ num }) => {
const compute = (n) => {
console.log("Calculating...");
return n * 10;
};
const result = useMemo(() => compute(num), [num]);
return <h2>Result: {result}</h2>;
};
export default ExpensiveCalculation;
🔹 The function only runs when num changes, improving performance.
7. useCallback (Optimizing Function Performance)
📌 Returns a memoized function to prevent unnecessary re-renders.
import React, { useState, useCallback } from "react";
const Button = ({ handleClick }) => {
console.log("Button rendered");
return <button onClick={handleClick}>Click Me</button>;
};
const App = () => {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount((prevCount) => prevCount + 1);
}, []);
return (
<div>
<h2>Count: {count}</h2>
<Button handleClick={increment} />
</div>
);
};
export default App;
🔹 useCallback prevents Button from re-rendering unless increment changes.
Conclusion
✅ Hooks make functional components more powerful by adding state & lifecycle features
✅ Most commonly used hooks: useState, useEffect, useContext
✅ Optimization hooks: useMemo, useCallback
✅ Advanced state management: useReducer