## 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.

```jsx
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.

```jsx
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.

```jsx
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.

```jsx
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.

```jsx
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.

```jsx
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.

```jsx
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.

```jsx
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.

```jsx
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.

```jsx
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.

```jsx
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.

```jsx
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.