DEV Community

Cover image for Mastering React Hooks in 2025! πŸš€
Mohit Decodes
Mohit Decodes

Posted on

Mastering React Hooks in 2025! πŸš€

#react #development #programming #frontend

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

βœ… 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>;
}
Enter fullscreen mode Exit fullscreen mode

βœ… 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>;
}
Enter fullscreen mode Exit fullscreen mode

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

βœ… 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>;
}
Enter fullscreen mode Exit fullscreen mode

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

βœ… 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" }} />;
}
Enter fullscreen mode Exit fullscreen mode

βœ… 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} />;
});
Enter fullscreen mode Exit fullscreen mode

βœ… 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];
}
Enter fullscreen mode Exit fullscreen mode

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

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)