記事を検索

import React, { useState } from 'react';

function ClickCounter() {
    // 状態変数「count」と、その状態を更新するための関数「setCount」を定義する。
    // 引数は「count」の初期値になる。0を指定する。
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>You clicked {count} times</p>
            { /*ボタンがクリックされたとき、countの値を1増やす。*/ }
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
}

export default ClickCounter;

import React, { useEffect } from 'react';

function ComponentWithEffect() {
		// 第一引数には、実行したい関数を定義する。
    // 第二引数には、依存する値のリストを定義し、いつ関数が実行されるか定義する。
		// ここでは空の配列を渡しているので（依存なし）、初回レンダリング時に一度だけ実行される。
    useEffect(() => {
        console.log('Component has mounted!');
    }, []);

    return <div>Hello, World!</div>;
}

export default ComponentWithEffect;

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

function ThemeViewer() {
    // ThemeContextから現在のテーマ（ここでは色）を取得する。
    const theme = useContext(ThemeContext);

    return (
        // 取得したテーマの色をスタイルとして適用する。
        <div style={{ color: theme.color }}>
            Current theme color is {theme.color}
        </div>
    );
}

export default ThemeViewer;

import React, { useReducer } from 'react';

// useReducerで使う。
// この関数は「現在の状態」と「アクション」を引数に取り、「新しい状態」を返す。
const reducer = (state, action) => {
    switch (action.type) {
        case 'increment':
            return { count: state.count + 1 };
        case 'decrement':
            return { count: state.count - 1 };
        default:
            throw new Error();
    }
};

const Counter = () => {
    // useReducerフックを使用して、「reducer関数」と「初期状態」を渡す。
    // これにより、「状態」と「その状態を更新するためのdispatch関数」が返される。
    const [state, dispatch] = useReducer(reducer, { count: 0 });

    // dispatch({ type: 'increment' })を呼び出すと、reducer関数が呼び出され、
    // 「現在の状態（例：1）」と「アクション（例：increment）」が引数として渡される。
    // reducer関数は、「新しい状態（例：2）」を返す。
    return (
        <div>
            Count: {state.count}
            <button onClick={() => dispatch({ type: 'increment' })}>+1</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>-1</button>
        </div>
    );
};

export default Counter;

import React, { useCallback } from 'react';

function SimpleButton() {
    // 初回レンダリング時のみ関数が生成される
    const handleClick = useCallback(() => {
        console.log('こんにちは!');
    }, []);

    return <button onClick={handleClick}>Click me</button>;
}

export default SimpleButton;

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

function SquaredNumber() {
    const [number, setNumber] = useState(0);

    // useMemoを使用して数値の二乗を計算し、その結果をメモ化する。
    // 依存配列にnumberを指定しているため、numberが変更されたときのみ再計算される。
    const squared = useMemo(() => number * number, [number]);

    return (
        <div>
            <input
                type="number"
                value={number}
                onChange={e => setNumber(parseInt(e.target.value, 10))}
            />
            <p>二乗した値: {squared}</p>
        </div>
    );
}

export default SquaredNumber

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

function AutoFocusedInput() {
    // 参照を作成
    const inputRef = useRef();

    useEffect(() => {
        // input要素への参照を使用して、その要素にフォーカスを当てる。
        inputRef.current.focus();
    }, []);

    // input要素に参照を割り当てる
    return <input ref={inputRef} type="text" />;
}

export default AutoFocusedInput;

import { useState, useEffect } from 'react';

// ユーザーデータを取得するカスタムフック
function useFetchUserData() {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    // fetchUserData() は外部APIからユーザーデータを取得する架空の関数
    fetchUserData().then(data => setUserData(data));
  }, []);

  return userData;
}

export default useFetchUserData;

import React from 'react';
import useFetchUserData from './useFetchUserData'; // カスタムフックをインポート

// ユーザーデータを表示するコンポーネント
function MyComponent() 
	// カスタムフック（データ取得処理）を実行
  const userData = useFetchUserData();

  return (
    <div>
      <h1>User Data</h1>
      <p>{JSON.stringify(userData)}</p>
    </div>
  );
}

export default MyComponent;

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

// 子コンポーネント
const ChildComponent = forwardRef((props, ref) => {
    useImperativeHandle(ref, () => ({
        // 3. このメソッドは親コンポーネントから直接呼び出すことができる
        customMethod() {
            console.log('customMethodが呼び出されました');
        }
    }));

    return <div>子コンポーネント</div>;
});

// 親コンポーネント
const ParentComponent = () => {
		// 1. 子コンポーネントの参照を作成
    const childRef = useRef();

    const handleClick = () => {
        // 4. 子コンポーネントのcustomMethodを直接呼び出す
        childRef.current.customMethod();
    };

    return (
        <div>
						{/* 2. 子コンポーネントの参照を渡す */}
            <ChildComponent ref={childRef} />
            <button onClick={handleClick}>子コンポーネントのメソッドを呼び出す</button>
        </div>
    );
};

export default ParentComponent;

import React, { useLayoutEffect, useRef, useState } from 'react';

function MeasureComponent() {
    const [size, setSize] = useState({});
    const ref = useRef();

    // 同期的にブラウザの描画の前に実行される。
    // そのため画面のちらつきを防ぐことができるがパフォーマンスが悪くなる。
    useLayoutEffect(() => {
        setSize({
            width: ref.current.offsetWidth,
            height: ref.current.offsetHeight
        });
    }, []);

    return (
        <div ref={ref}>
            <p>Width: {size.width}px, Height: {size.height}px</p>
        </div>
    );
}

export default MeasureComponent;

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

function useCustomHook() {
    const [value, setValue] = useState('これは初期値です');

    // React Developer Toolsにデバッグ情報を表示する。
    // valueが設定されている場合は'値はセットされています'、設定されていない場合は'値はセットされていません'と表示する。
    useDebugValue(value ? '値はセットされています' : '値はセットされていません');

    return value;
}

function Test() {
    const value = useCustomHook();

    return <div>{value}</div>;
}

export default Test;