Understanding React Hooks

React Hooks were introduced in React 16.8 to enable functional components to use state and other React features without writing a class. In this blog, we’ll explore different hooks, their use cases, and best practices.

1. What Are React Hooks?

Hooks are functions that let you use state and lifecycle features in functional components. Some commonly used hooks include:

• useState – Manages state in a functional component.
• useEffect – Handles side effects like data fetching.
• useContext – Accesses values from React Context.
• useRef – Manages references to DOM elements.
• useMemo and useCallback – Optimize performance by memoizing values and functions.

2. Using useState for State Management

The useState hook allows functional components to have local state.

mport { useState } from 'react';

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

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

3. Managing Side Effects with useEffect

The useEffect hook runs after the component renders and is used for side effects like data fetching.

import { useEffect, useState } from 'react';

function DataFetcher() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // Runs only once on mount

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

4. Sharing State with useContext

The useContext hook provides access to context values without prop drilling.

Get Nidhi Bhanderi’s stories in your inbox
Join Medium for free to get updates from this writer.
Remember me for faster sign in
import { createContext, useContext } from 'react';

const UserContext = createContext();

function UserProvider({ children }) {
  return (
    <UserContext.Provider value={{ name: 'Alice' }}>
      {children}
    </UserContext.Provider>
  );
}

function UserProfile() {
  const { name } = useContext(UserContext);
  return <p>User: {name}</p>;
}

5. Optimizing Performance with useMemo and useCallback

useMemo – Memoizing Values

import { useMemo, useState } from 'react';

function ExpensiveCalculation({ num }) {
  const result = useMemo(() => num * 2, [num]);
  return <p>Result: {result}</p>;
}

useCallback – Memoizing Functions

import { useCallback, useState } from 'react';

function Button({ onClick }) {
  return <button onClick={onClick}>Click Me</button>;
}
function Parent() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => setCount(count + 1), [count]);
  return <Button onClick={handleClick} />;
}

useCallback – Memoizing Functions

import { useCallback, useState } from 'react';

function Button({ onClick }) {
  return <button onClick={onClick}>Click Me</button>;
}
function Parent() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => setCount(count + 1), [count]);
  return <Button onClick={handleClick} />;
}

import { useMemo, useState } from 'react';

function ExpensiveCalculation({ num }) {
  const result = useMemo(() => num * 2, [num]);
  return <p>Result: {result}</p>;
}

useCallback – Memoizing Functions

import { useCallback, useState } from 'react';

function Button({ onClick }) {
  return <button onClick={onClick}>Click Me</button>;
}

function Parent() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => setCount(count + 1), [count]);
  return <Button onClick={handleClick} />;
}

Conclusion

React Hooks simplify state management and lifecycle handling in functional components. Using hooks correctly can make your components more efficient and readable