React Glossary and Usage Guide

React Glossary and Usage Guide

This article provides a glossary and guide to help you master React and develop component-based applications efficiently.
Let's understand React from the basics to more advanced concepts.

React Hooks

React hooks are special functions for handling state and side effects in function components. Below, we explain the main React hooks along with sample code.

useState

useState is a React hook for managing state in a function component. It lets you hold and update state.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

useEffect

useEffect is a React hook for controlling side effects inside a function component. A side effect refers to processing that affects something outside the function, such as DOM changes or asynchronous operations.

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

function DataFetching() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

useRef

useRef is used to access a DOM element or another ref object inside a function component.

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

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

  useEffect(() => {
    // ページがロードされたときに input 要素にフォーカスを当てる
    inputRef.current.focus();
  }, []);

  return <input ref={inputRef} type="text" />;
}

useContext and createContext

You can use useContext together with createContext to work with context. This removes the need to pass data down from a parent through props.

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

const MyContext = createContext();

function App() {
  return (
    <MyContext.Provider value="Hello from Context!">
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  const value = useContext(MyContext);
  return <p>{value}</p>;
}

useMemo and useCallback

useMemo is used to memoize a value, and useCallback is used when passing a function to a component you want to avoid re-rendering.

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

function List({ items }) {
  const itemCount = useMemo(() => items.length, [items]);
  const handleClick = useCallback((item) => {
    // ハンドラーロジック
  }, []);

  return (
    <div>
      <p>Item Count: {itemCount}</p>
      {items.map((item) => (
        <button key={item.id} onClick={() => handleClick(item)}>
          {item.name}
        </button>
      ))}
    </div>
  );
}

Recoil

Note: Meta archived the Recoil repository in January 2025, and it is no longer maintained. Jotai or Zustand are the more common choices today.

Recoil simplifies state management within React applications. Below, we explain the main Recoil hooks along with sample code.

useRecoilState

useRecoilState handles state much like useState. When the state is updated, components that use it re-render.

import { useRecoilState } from 'recoil';
import { myState } from './recoilAtoms';

function MyComponent() {
  const [state, setState] = useRecoilState(myState);

  return (
    <div>
      <p>State: {state}</p>
      <button onClick={() => setState(state + 1)}>Increment</button>
    </div>
  );
}

useRecoilValue

useRecoilValue takes a RecoilValue and lets you use the state. When the state is updated, components that use it re-render.

import { useRecoilValue } from 'recoil';
import { myState } from './recoilAtoms';

function MyComponent() {
  const state = useRecoilValue(myState);

  return <p>State: {state}</p>;
}

useSetRecoilState

useSetRecoilState takes a RecoilState and gives you a setter function for the state. Even when the state is updated, components that use it do not re-render.

import { useSetRecoilState } from 'recoil';
import { myState } from './recoilAtoms';

function MyComponent() {
  const setState = useSetRecoilState(myState);

  return (
    <div>
      <button onClick={() => setState((prev) => prev + 1)}>Increment</button>
    </div>
  );
}

Redux

Redux is a powerful global state management tool, but you may want to consider using Recoil instead. Below are the main Redux functions along with sample code.

createSlice

Using createSlice generates a reducer, and the action types and action creators are generated automatically.

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: 0,
  reducers: {
    increment: (state) => state + 1,
    decrement: (state) => state - 1
  }
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

configureStore

Use configureStore to combine the slices you've created into a single store.

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer
  }
});

useSelector

Use useSelector to retrieve the data you need from the state stored in the store.

import { useSelector } from 'react-redux';

function CounterDisplay() {
  const count = useSelector((state) => state.counter);
  return <p>Count: {count}</p>;
}

useDispatch

Use useDispatch to get a function for changing the store's data.

import { useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';

function CounterButtons() {
  const dispatch = useDispatch();

  return (
    <div>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

Understand the terminology of React and its ecosystem, and try putting these hooks and tools to use to build effective applications.