Are you still passing props endlessly or struggling with side effects and performance issues in React?
Here’s your quick guide to modern React Hooks – the cleanest way to manage state, side effects, context, and performance in functional components.
🔧 What's Covered?
✅ useState – Manage State
Add local state to functional components easily.
import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); return ( <div> <p>Count: {count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); } ✅ useEffect – Handle Side Effects
Run side effects like fetching data.
import { useEffect, useState } from "react"; function FetchData() { const [data, setData] = useState(null); useEffect(() => { fetch("https://jsonplaceholder.typicode.com/todos/1") .then((res) => res.json()) .then((json) => setData(json)); }, []); return <pre>{JSON.stringify(data, null, 2)}</pre>; } ✅ useContext – Avoid Prop Drilling
Access context values directly.
import { createContext, useContext } from "react"; const ThemeContext = createContext("light"); function ThemedButton() { const theme = useContext(ThemeContext); return <button style={{ background: theme === "dark" ? "#333" : "#fff" }}>Click Me</button>; } ✅ useRef – Persist Values Without Re-render
Refer to DOM elements and preserve values.
import { useRef } from "react"; function FocusInput() { const inputRef = useRef(null); return ( <div> <input ref={inputRef} /> <button onClick={() => inputRef.current.focus()}>Focus</button> </div> ); } ✅ useMemo – Optimize Expensive Calculations
import { useMemo, useState } from "react"; function ExpensiveCalculation({ num }) { const squared = useMemo(() => { console.log("Calculating..."); return num * num; }, [num]); return <p>Squared: {squared}</p>; } ✅ useCallback – Prevent Function Recreation
import { useState, useCallback } from "react"; function Button({ handleClick }) { return <button onClick={handleClick}>Click Me</button>; } function App() { const [count, setCount] = useState(0); const increment = useCallback(() => { setCount((prev) => prev + 1); }, []); return ( <div> <p>Count: {count}</p> <Button handleClick={increment} /> </div> ); } ✅ useLayoutEffect – Sync with DOM Before Paint
import { useLayoutEffect, useRef } from "react"; function Box() { const boxRef = useRef(null); useLayoutEffect(() => { boxRef.current.style.transform = "scale(1.2)"; }, []); return <div ref={boxRef} style={{ width: 100, height: 100, background: "blue" }} />; } ✅ useImperativeHandle – Expose Methods via Ref
import { forwardRef, useImperativeHandle, useRef } from "react"; const CustomInput = forwardRef((_, ref) => { const inputRef = useRef(); useImperativeHandle(ref, () => ({ focus: () => inputRef.current.focus(), })); return <input ref={inputRef} />; }); ✅ useDebugValue – Debug Custom Hooks
import { useState, useDebugValue } from "react"; function useCustomHook(value) { const [state, setState] = useState(value); useDebugValue(state > 5 ? "High" : "Low"); return [state, setState]; } ✅ useId – Generate Unique IDs for Accessibility
import { useId } from "react"; function Form() { const id = useId(); return ( <div> <label htmlFor={id}>Name:</label> <input id={id} type="text" /> </div> ); } Whether you're building a project, prepping for interviews, or leveling up your React game — these hooks are must-know tools!
📥 For more bite-sized learning content, and tutorials visit 👉 https://mohitdecodes.com
Top comments (0)