React Hooks revolutionized the way developers write React components when they were introduced in React 16.8. These functions allow you to "hook into" React state and lifecycle features from function components, eliminating the need for class components in many cases. This article explores six essential React Hooks: useState, useMemo, useCallback, useRef, useEffect, and useContext.

useState: Managing State in Function Components

The useState Hook enables function components to manage local state. It's the most basic and frequently used Hook in React.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

The useState Hook:

Returns a pair: the current state value and a function to update it
Takes an initial state value as its only argument
Can be used multiple times in a single component for different state variables
Preserves state between re-renders
Updates trigger component re-renders

useEffect: Side Effects in Function Components

The useEffect Hook lets you perform side effects in function components. It serves the same purpose as componentDidMount, componentDidUpdate, and componentWillUnmount in React class components, but unified into a single API.

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setLoading(true);
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    // Cleanup function (similar to componentWillUnmount)
    return () => {
      // Cancel requests or clean up resources
    };
  }, []); // Empty dependency array means this effect runs once on mount

  if (loading) return <p>Loading...</p>;
  return <div>{JSON.stringify(data)}</div>;
}

The useEffect Hook:

Runs after every render by default
Accepts a dependency array as a second argument to control when it runs
Can return a cleanup function to prevent memory leaks
Can be used for data fetching, subscriptions, DOM manipulation, and more

useMemo: Memoizing Expensive Calculations

The useMemo Hook remembers the result of a calculation between renders, optimizing performance by avoiding redundant recalculations.

import React, { useState, useMemo } from 'react';

function ExpensiveCalculation({ list, filter }) {
  const [count, setCount] = useState(0);

  // This calculation only re-runs when list or filter changes
  const filteredList = useMemo(() => {
    console.log('Filtering list...');
    return list.filter(item => item.includes(filter));
  }, [list, filter]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        Count: {count}
      </button>
      <ul>
        {filteredList.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

The useMemo Hook:

Returns a memoized value
Only recalculates when dependencies change
Optimizes expensive calculations or preventing unnecessary re-renders
Should be used for computationally expensive operations

useCallback: Memoizing Functions

The useCallback Hook returns a memoized callback function. It's similar to useMemo, but for functions rather than values.

import React, { useState, useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);
  const [otherState, setOtherState] = useState(0);

  // This function is memoized and only changes if count changes
  const handleClick = useCallback(() => {
    console.log(`Button clicked with count: ${count}`);
    // Do something with count
  }, [count]);

  return (
    <div>
      <ChildComponent handleClick={handleClick} />
      <button onClick={() => setCount(count + 1)}>
        Increment Count: {count}
      </button>
      <button onClick={() => setOtherState(otherState + 1)}>
        Increment Other State: {otherState}
      </button>
    </div>
  );
}

// Using React.memo to prevent unnecessary re-renders
const ChildComponent = React.memo(({ handleClick }) => {
  console.log('ChildComponent rendered');
  return <button onClick={handleClick}>Click me</button>;
});

The useCallback Hook:

Returns a memoized callback function
Only changes when dependencies change
Is essential when passing callbacks to optimized child components that rely on reference equality
Works hand-in-hand with React.memo to optimize performance

useRef: Accessing and Persisting Values

The useRef Hook creates a mutable reference that persists across renders. It can be used to access DOM elements directly or store mutable values without causing re-renders.

import React, { useRef, useEffect, useState } from 'react';

function TextInputWithFocus() {
  const inputRef = useRef(null);
  const previousValueRef = useRef('');
  const [value, setValue] = useState('');

  // Focus the input on mount
  useEffect(() => {
    inputRef.current.focus();
  }, []);

  // Store previous value without causing re-renders
  useEffect(() => {
    previousValueRef.current = value;
  }, [value]);

  return (
    <div>
      <input
        ref={inputRef}
        value={value}
        onChange={e => setValue(e.target.value)}
      />
      <p>Current value: {value}</p>
      <p>Previous value: {previousValueRef.current}</p>
    </div>
  );
}

The useRef Hook:

Returns a mutable ref object with a .current property
Persists across component renders
Changes to the .current property don't trigger re-renders
Common uses include accessing DOM elements, storing previous values, or holding instance variables

useContext: Accessing Context in Function Components

The useContext Hook provides a way to consume React context without nested render props or higher-order components, making it easier to share global data.

import React, { useContext, createContext, useState } from 'react';

// Create a context
const ThemeContext = createContext();

function App() {
  const [theme, setTheme] = useState('light');

  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      <div className={`app ${theme}`}>
        <Header />
        <MainContent />
        <Footer />
      </div>
    </ThemeContext.Provider>
  );
}

function Header() {
  const { theme, setTheme } = useContext(ThemeContext);

  return (
    <header>
      <h1>My App</h1>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle {theme === 'light' ? 'Dark' : 'Light'} Mode
      </button>
    </header>
  );
}

function MainContent() {
  const { theme } = useContext(ThemeContext);

  return (
    <main>
      <p>Current theme: {theme}</p>
      {/* Other content */}
    </main>
  );
}

The useContext Hook:

Accepts a context object created by createContext
Returns the current context value
Always re-renders when the context value changes
Simplifies component trees by reducing nesting
Is ideal for global themes, user data, language preferences, etc.

Combining Hooks for Powerful Patterns

Hooks are composable, allowing developers to create custom hooks that encapsulate reusable logic. By combining the basic hooks, you can create powerful patterns:

// Custom hook for handling form inputs
function useFormInput(initialValue) {
  const [value, setValue] = useState(initialValue);

  const handleChange = useCallback(e => {
    setValue(e.target.value);
  }, []);

  return {
    value,
    onChange: handleChange
  };
}

// Usage
function LoginForm() {
  const email = useFormInput('');
  const password = useFormInput('');

  const handleSubmit = e => {
    e.preventDefault();
    console.log('Submit:', email.value, password.value);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" placeholder="Email" {...email} />
      <input type="password" placeholder="Password" {...password} />
      <button type="submit">Login</button>
    </form>
  );
}

Rules of Hooks

For Hooks to work correctly, follow these two essential rules:

Only call Hooks at the top level - Don't call Hooks inside loops, conditions, or nested functions.
Only call Hooks from React function components or custom Hooks - Don't call Hooks from regular JavaScript functions.

Conclusion

React Hooks provide a more direct API to React concepts like state, side effects, context, and refs. They enable function components to fully replace class components in most scenarios, leading to more concise, readable, and testable code. The six Hooks covered in this article—useState, useEffect, useMemo, useCallback, useRef, and useContext—form the foundation of modern React development, empowering developers to build sophisticated, high-performance applications with clean, maintainable code.

As you integrate Hooks into your React projects, remember that mastering when and why to use each Hook is as important as knowing how to use them. Start with useState and useEffect for basic state management and side effects, then gradually incorporate the more specialized Hooks as your applications grow in complexity.

Explanation on React Hooks