Reactで無名関数を使用する場面と実装例

Reactで無名関数を使用する場面と実装例

Reactで無名関数（アロー関数など）を使用する場面は多く、特に以下のような場合があります。

1. イベントハンドラーの定義
ボタンのクリックなどのイベントを処理する際に、無名関数を使ってその場で関数を定義します。
2. 配列メソッドでのコールバック
map, filter, reduce などの配列メソッドにコールバック関数を渡す場合。
3. React Hooksと一緒に使う
useEffect, useCallback などのHooksにコールバック関数を渡す場合。

以下にいくつかの実装例を示します。

1. イベントハンドラーの定義

import React from 'react';

function App() {
  const handleClick = (event) => {
    console.log('Button clicked!', event);
  };

  return (
    <div>
      <button onClick={(e) => handleClick(e)}>Click Me</button>
    </div>
  );
}

export default App;

2. 配列メソッドでのコールバック

import React from 'react';

function App() {
  const items = [1, 2, 3, 4, 5];
  const doubledItems = items.map((item) => item * 2);

  return (
    <div>
      <ul>
        {doubledItems.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

3. React Hooksと一緒に使う

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

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

  useEffect(() => {
    const handleResize = () => {
      console.log('Window resized');
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click Me</button>
    </div>
  );
}

export default App;

これらの例を参考に、Reactでの無名関数の使用方法を理解し、適切に活用してください。