React  

React Hooks Cheat Sheet Part-1

In this first part, we will cover the core hooks that every React developer uses almost daily. These include:

  • useState

  • useEffect

  • useContext

  • useRef

  • useReducer

We will break down what each hook does, why you should use it, and provide examples that feel practical instead of textbook.

Introduction

React Hooks changed the way developers build components. Before hooks, you had to rely on class components for things like state and lifecycle methods. Hooks made it possible to write everything with simple functions while keeping the code cleaner and easier to reuse.

This cheat sheet is your quick but detailed guide. You can use it as a refresher while coding or as a learning tool if you are new to hooks. Let’s start with the basics.

1. useState

The useState hook lets you add state to a functional component. Think of it as a variable that remembers its value even after re-renders.

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>
  );
}

  • useState(0) sets the initial state to 0.

  • count is the current value.

  • setCount is the function to update the value.

Common use cases: form inputs, toggles, counters, or anything where you need to store user interaction data.

2. useEffect

The useEffect hook runs side effects in your component. Side effects are actions that affect something outside the component, like fetching data, updating the document title, or setting timers.

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

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prev => prev + 1);
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return <p>Timer: {seconds}</p>;
}

  • The empty array [] makes the effect run only once when the component mounts.

  • The cleanup function (clearInterval) runs when the component unmounts.

Common use cases: API calls, subscriptions, DOM event listeners, or animations.

3. useContext

The useContext hook helps you avoid prop drilling. Instead of passing props through multiple layers, you can use context to share data across the tree.

import React, { useContext } from "react";
import { ThemeContext } from "./ThemeProvider";

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

  return (
    <button style={{ background: theme.background, color: theme.color }}>
      I am styled by theme context
    </button>
  );
}

Here, ThemeContext provides the values and useContext allows you to consume them.

Common use cases: theming, authentication, and language settings.

4. useRef

The useRef hook gives you a way to store a value that does not cause a re-render when it changes. It is also commonly used to directly reference DOM elements.

import React, { useRef } from "react";

function InputFocus() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

  • useRef(null) creates a reference.

  • inputRef.current points to the DOM node.

Common use cases: focusing inputs, storing previous values, or keeping mutable values between renders.

5. useReducer

When state logic gets complex, useReducer is a better choice than multiple useState hooks. It is similar to Redux but built into React.

import React, { useReducer } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
    </div>
  );
}

This approach is helpful when state transitions are predictable and event-driven.

Wrapping Up Part 1

In this part, we covered the core hooks that form the foundation of most React apps. These hooks alone can handle a wide variety of situations, from managing simple state to handling side effects and avoiding prop drilling.

But React hooks go further. In the next part, we will dive into advanced and specialized hooks like useMemo, useCallback, useImperativeHandle, and how to create custom hooks to reuse logic effectively.

Next part: React Hooks Cheat Sheet Part-2

Membership not found