Understanding Core React Hooks (with Practical Examples)

*Hooks *let you use different React features from your components. You can either use the built-in Hooks or combine them to build your own.

In this article, we’ll break down six important hooks:

1. useCallback

2. useState

3. useEffect

4. useRef

5. useMemo

6. useContext

7. useState — Managing Component State useState allows you to store and update values inside a functional component.

import { useState } from "react";

import "./App.css";

function App() {
  const [count, setCount] = useState(0);
  //count is the state
  //setCount updates the state
  //when state changes, the component re-renders

  return (
    <div>

      <p>Count: {count}</p>{" "}
      <button onClick={() => setCount(count + 1)}>Increment</button>{" "}
    </div>
  );


}

export default App;

1. useEffect — Handling Side Effects useEffect is used for side effects like fetching data, subscriptions, or DOM updates.

import { useEffect, useState } from "react";

import "./App.css";

function App() {
 const [users, setUsers] = useState([]);
 //Runs after render
 useEffect(() => {
   fetch("https://jsonplaceholder.typicode.com/users")
     .then((res) => res.json())
     .then((data) => setUsers(data));
 }, []);//Dependency array controls when it runs
        //empty array runs once (on mount)
        //when there is value in the array it runs when value changes

 return (
   <ul>
     {" "}
     {users.map((user) => (
       <li key={user.id}>{user.name}</li>
     ))}{" "}
   </ul>
 );


}

export default App;

1. useRef — Persisting Values Without Re-render useRef stores a value that persists across renders without triggering a re-render.

import { useEffect, useRef, useState } from "react";

import "./App.css";

function App() {
 const inputRef = useRef(null); //Does NOT trigger re-renders
// it is Useful for:
    // 1. DOM access
    // 2. Storing mutable values
 const focusInput = () => {
   inputRef.current.focus();
 };
 return (
   <div>
     {" "}
     <input ref={inputRef} />{" "}
     <button onClick={focusInput}>Focus Input</button>{" "}
   </div>
 );


}

export default App;

1. useCallback — Memoizing Functions useCallback prevents a function from being recreated on every render.

import { useCallback, useEffect, useRef, useState } from "react";

import "./App.css";

function App() {
  const [count, setCount] = useState(0);

//Prevents unnecessary re-renders in child components
//Useful when passing functions as props
  const handleClick = useCallback(() => {
    console.log("Clicked");
  }, []);
  return (
    <div>
      {" "}
      <button onClick={() => setCount(count + 1)}>Increment</button>{" "}
      <Child onClick={handleClick} />{" "}
    </div>
  );
}

export default App;

function Child({ onClick }) {
  console.log("Child rendered");
  return <button onClick={onClick}>Click Me</button>;
}

1. useMemo — Memoizing Expensive Computations useMemo caches the result of a computation so it doesn’t run every render.

import { useCallback, useEffect, useMemo, useRef, useState } from "react";

import "./App.css";

function App() {
  const compute = (n) => {
    console.log("Calculating...");
    return n * 2;
  };

//Only recalculates when dependencies change
//Improves performance for expensive operations
  const result = useMemo(() => compute(num), [num]);

  return <p>Result: {result}</p>;
}

export default App;

1. useContext — Sharing State Globally useContext allows you to share data across components without prop drilling.

themeContext.jsx

import { createContext } from "react";

export const ThemeContext = createContext();
function App() {
  return (      {" "}
    <ThemeContext.Provider value="dark">
      <Child />
    </ThemeContext.Provider>
  );
}

import { useContext } from "react";
import { ThemeContext } from "./ThemeContext";

function Child() {
  const theme = useContext(ThemeContext);

  return <p>Theme: {theme}</p>;
}