React Hooks Summarised

React hooks are functions that allow you to use state and other React features in functional components, which were previously only available in class components. React hooks were introduced in React 16.8 and have since become an important part of React development.

Here is a list of React hooks available:

useState: The useState hook is used to manage state in functional components. It takes an initial state value and returns an array with two elements: the current state and a function to update the state.

import { useState } from 'react';

function Example() {
  const [isActive, setIsActive] = useState(false);
  function handleClick() {
    setIsActive(!isActive);
  }
  return (
    <button onClick={handleClick}>
      {isActive ? 'Active' : 'Inactive'}
    </button>
  );
}

useEffect: The useEffect hook is used to handle side effects, such as fetching data or manipulating the DOM, in functional components. It takes a function that is executed after every render and an optional array of dependencies that determine when the effect should be re-run.

import { useEffect } from 'react';

function Example() {
  useEffect(() => {
    document.title = 'New Title';
  });
  return <div>Example</div>;
}

useContext: The useContext hook is used to consume a React context in a functional component. It takes a context object created with the createContext function and returns the current value of the context.

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

function Example() {
  const theme = useContext(ThemeContext);
  return <div style={{ color: theme.color }}>Example</div>;
}

useReducer: The useReducer hook is an alternative to useState for managing more complex state. It takes a reducer function and an initial state value, and returns the current state and a dispatch function to update the state.

import { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}
function Example() {
  const [count, dispatch] = useReducer(reducer, 0);
  function handleIncrement() {
    dispatch({ type: 'INCREMENT' });
  }
  function handleDecrement() {
    dispatch({ type: 'DECREMENT' });
  }
  return (
    <div>
      <button onClick={handleIncrement}>+</button>
      {count}
      <button onClick={handleDecrement}>-</button>
    </div>
  );
}

useCallback: The useCallback hook is used to memoize a function, so that it only gets re-created if its dependencies change. This is useful when passing functions as props to child components.

import { useState, useCallback } from 'react';

function Example() {
  const [count, setCount] = useState(0);
  const incrementCount = useCallback(() => {
    setCount(count + 1);
  }, [count]);
  return <button onClick={incrementCount}>{count}</button>;
}

useMemo: The useMemo hook is used to memoize a value, so that it only gets re-computed if its dependencies change. This is useful for expensive calculations that don’t need to be re-done on every render.

import { useMemo } from 'react';

function Example({ a, b }) {
  const result = useMemo(() => {
    return a * b;
  }, [a, b]);
  return <div>{result}</div>;
}

useRef: The useRef hook is used to create a mutable reference that persists between renders. This is useful for storing values that don’t trigger a re-render.

import { useRef } from 'react';

function Example() {
  const inputRef = useRef(null);
  function handleClick() {
    inputRef.current.focus();
  }
  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

useLayoutEffect: The useLayoutEffect hook is similar to useEffect, but it runs synchronously after the DOM has been updated. This is useful for interacting with the DOM in a way that affects the layout of the page.

import { useLayoutEffect, useState } from 'react';

function Example() {
  const [width, setWidth] = useState(0);
  useLayoutEffect(() => {
    function updateWidth() {
      setWidth(window.innerWidth);
    }
    window.addEventListener('resize', updateWidth);
    return () => window.removeEventListener('resize', updateWidth);
  }, []);
  return <div>Width: {width}</div>;
}

useImperativeHandle: The useImperativeHandle hook is used to expose a specific interface from a child component to its parent. This is useful when working with third-party libraries that require a specific interface.

import { forwardRef, useImperativeHandle, useRef } from 'react';

const Child = forwardRef((props, ref) => {
  const inputRef = useRef(null);
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
  }));
  return <input type="text" ref={inputRef} />;
});
function Example() {
  const childRef = useRef(null);
  function handleClick() {
    childRef.current.focus();
  }
  return (
    <div>
      <Child ref={childRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

useDebugValue: The useDebugValue hook is used to display a custom label in React DevTools for a custom hook. This is useful for debugging custom hooks.

import { useDebugValue, useState } from 'react';

function useDoubleCount() {
  const [count, setCount] = useState(0);
  function increment() {
    setCount(c => c + 1);
  }
  useDebugValue(count * 2);
  return [count, increment];
}
function Example() {
  const [count, increment] = useDoubleCount();
  return (
    <div>
      <div>Count: {count}</div>
      <button onClick={increment}>Increment</button>
    </div>
  );
}