React Hooks

This document provides a brief overview and simple test cases for common React hooks: useState, useEffect, and useRef. Use React Testing Library and @testing-library/react-hooks (or the built-in renderHook in newer versions) to verify behavior.

---

1. useState

Description

useState lets you add React state to function components.

Example Component

function Counter() {
  const [count, setCount] = React.useState(0);
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

Simple Test

import { render, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('increments count on click', () => {
  const { getByText } = render(<Counter />);
  const button = getByText(/Count: 0/i);

  fireEvent.click(button);
  expect(getByText(/Count: 1/i)).toBeTruthy();
});

---

2. useEffect

Description

useEffect lets you perform side effects in function components.

Example Component

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

  React.useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(json => setData(json));
  }, [url]);

  return data ? <pre>{JSON.stringify(data)}</pre> : <p>Loading...</p>;
}

Simple Test

import { render, waitFor } from '@testing-library/react';
import DataFetcher from './DataFetcher';

global.fetch = jest.fn(() =>
  Promise.resolve({ json: () => Promise.resolve({ hello: 'world' }) })
);

test('fetches and displays data', async () => {
  const { getByText } = render(<DataFetcher url="/api/test" />);
  await waitFor(() => expect(getByText(/"hello": "world"/)).toBeTruthy());
});

---

3. useRef

Description

useRef returns a mutable ref object whose .current property persists across renders.

Example Component

function TextInputWithFocusButton() {
  const inputEl = React.useRef(null);
  const onFocus = () => inputEl.current && inputEl.current.focus();

  return (
    <>
      <input ref={inputEl} />
      <button onClick={onFocus}>Focus the input</button>
    </>
  );
}

Simple Test

import { render, fireEvent } from '@testing-library/react';
import TextInputWithFocusButton from './TextInputWithFocusButton';

test('focuses the input on button click', () => {
  const { getByRole } = render(<TextInputWithFocusButton />);
  const button = getByRole('button');
  const input = getByRole('textbox');

  fireEvent.click(button);
  expect(document.activeElement).toBe(input);
});

---

Next Steps

• Install and configure @testing-library/react-hooks for more advanced hook testing.
• Explore custom hooks and write tests for their internal logic.
• Add error handling and cleanup tests for useEffect.