Reactでレンダリング前に処理を入れる方法

Reactでレンダリング前に処理を入れる方法

Reactでレンダリング前に処理を行う方法として、getDerivedStateFromPropsやcomponentDidMountといったライフサイクルメソッドを使用することが一般的です。
しかし、Reactのファンクショナルコンポーネントを使用する場合、useEffectフックを使用することができます。

以下に、TypeScriptを使用した例を示します。

ソースコード例

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

interface MyComponentProps {
  someProp: string;
}

const MyComponent: React.FC<MyComponentProps> = ({ someProp }) => {
  const [state, setState] = useState<string>('');

  useEffect(() => {
    // レンダリング前に処理を行う
    console.log('レンダリング前に処理を行っています');
    setState(someProp);
  }, [someProp]);

  return (
    <div>
      <h1>My Component</h1>
      <p>State: {state}</p>
    </div>
  );
};

export default MyComponent;

この例では、useEffectフックを使用してsomePropが変更されるたびに処理を行っています。
この処理はコンポーネントのレンダリング前に実行されます。