Maria M.

Posted on Jul 23

A Complete Overview of Built-in React Hooks 🚀

#webdev #programming #javascript #react

React Hooks let you use React features from your functional components. Here is a guide to the most important built-in hooks and how to use them with examples.

State Hooks 🧠

`useState`

useState allows you to add state to a functional component.

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

`useReducer`

useReducer is useful for managing complex state with update logic inside a reducer function.

import { useReducer } from "react";

const initialState = { count: 0 };

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

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
}

Context Hooks 🌐

`useContext`

useContext allows a component to subscribe to a context without passing props.

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

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

  return (
    <button style={{ background: theme.background, color: theme.color }}>
      Themed Button
    </button>
  );
}

Ref Hooks 🪝

`useRef`

useRef lets you access a DOM element directly.

import { useRef } from "react";

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

  const focusInput = () => {
    inputRef.current.focus();
  };

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

Effect Hooks 🌟

`useEffect`

useEffect is used for side effects in components, like fetching data or subscribing to events.

import { useEffect, useState } from "react";

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

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(url);
      const result = await response.json();
      setData(result);
    };

    fetchData();
  }, [url]);

  return (
    <div>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

Performance Hooks ⚡

`useMemo`

useMemo memoizes an expensive calculation and reuses it.

import { useMemo } from "react";

function TodoList({ todos, tab }) {
  const visibleTodos = useMemo(() => {
    return todos.filter(todo => todo.tab === tab);
  }, [todos, tab]);

  return (
    <ul>
      {visibleTodos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

`useCallback`

useCallback memoizes a function to avoid recreating it on every render.

import { useCallback } from "react";

function ParentComponent() {
  const handleClick = useCallback(() => {
    console.log("Button clicked");
  }, []);

  return <ChildComponent onClick={handleClick} />;
}

function ChildComponent({ onClick }) {
  return <button onClick={onClick}>Click me</button>;
}

Transition Hooks 🌈

`useTransition`

useTransition marks a state transition as non-blocking.

import { useState, useTransition } from "react";

function List({ items }) {
  const [isPending, startTransition] = useTransition();
  const [query, setQuery] = useState('');

  const handleChange = (e) => {
    startTransition(() => {
      setQuery(e.target.value);
    });
  };

  const filteredItems = items.filter(item => item.includes(query));

  return (
    <div>
      <input type="text" value={query} onChange={handleChange} />
      {isPending && <p>Loading...</p>}
      <ul>
        {filteredItems.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

`useDeferredValue`

useDeferredValue defers updating a non-critical part of the UI.

import { useState, useDeferredValue } from "react";

function SearchResults({ query, results }) {
  const deferredQuery = useDeferredValue(query);

  const filteredResults = results.filter(item => item.includes(deferredQuery));

  return (
    <ul>
      {filteredResults.map(result => (
        <li key={result}>{result}</li>
      ))}
    </ul>
  );
}

Conclusion 🎉

React Hooks are powerful tools that allow you to manage state, context, effects, and performance of your functional components efficiently. Using these hooks correctly can significantly improve the quality and maintainability of your code. Happy coding! 🚀

DEV Community