[React] useStateとuseEffectってすごく便利じゃん

今までjQueryで戦ってきたのですが、とうとう見切りをつけて次のステップに進もうとしているコテツです…

Reactの考え方

React では、DOM 要素を直接操作する代わりに、React の状態管理やレンダリング方法を使用して操作を行うことが推奨されているとのこと。

useState

useState フックは、状態（state）を React コンポーネント内で管理するために使用します。状態は、コンポーネント内でのデータの変更を追跡し、自動的に再レンダリングするために使われます。

差分取って差分の分だけレンダリングするっぽいですね。楽だし早いね。

Reactの基本理念？である状態管理で差分を取るってのがuseStateの肝な気がする。

useEffect

コンポーネントのレンダリング後に実行される処理(データ)を管理するために使用します。

useEffect フックは第1引数に副作用の関数を受け取り、第2引数には、依存する値の配列を指定します。この配列に指定した値が変更された場合に副作用関数が再実行されます。

空の配列を指定することで、初回レンダリング時にのみ副作用関数が実行されることを意味します。

    const [csrfToken, setCsrfToken] = useState(null);
    useEffect(() => {
        // メタタグからトークンを取得
        const metaTag = document.querySelector('meta[name="csrf-token"]');
        if (metaTag) {
            setCsrfToken(metaTag.content);
        }
    }, []);

なんとなくonloadっぽい。。。

注意点

第二引数に何も指定しない

無限ループ発生します。ローカル端末が燃えます。気をつけましょ。