React Hooksとは

React Hooksとは

React HooksはReact16.8バージョンから新しく追加された機能で,
関数形コンポーネントでstate管理とLife cycleを使えるようにしてくれます。

class形で複雑に書いてたものが以下のように読みやすくなります。

// class形
constructor(props) {
 super(props) {
  this.state = {
   count:0
  }
 }
 
 incrementCounter = () => {
 this.setState({count: this.state.count + 1});
}

// 関数形
const [count, serCount] = useState(0);

const incrementCounter = () => {
 serCount(count + 1)
}

Hookが生まれた理由

. class形のthisのせい（thisは更新が可能なので）
. class componentではstateロジックを再使用するのが難しい
. 可読性が悪い
. 低い性能

😈thisのせいの理由はここにあります。

import React, { Component } from "react";
import "./styles.css";
import FollowButton from "./FollowButton";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedUser: ""
    };
  }

  handleUserChange = (event) => {
    this.setState({ selectedUser: event.target.value });
  };

  render() {
    return (
      <div className="App">
        <select
          onChange={this.handleUserChange}
          value={this.state.selectedUser}
        >
          <option value="Kim">Kim</option>
          <option value="Park">Park</option>
        </select>
        <FollowButton user={this.state.selectedUser} />
      </div>
    );
  }
}

export default App;

import React from 'react';

export default class FollowButton extends React.Component {
  handleClick = () => {
    setTimeout(() => {
      alert(`Followed ${this.props.user}.`);
    }, 3000);
  };

  render() {
    return <button onClick={this.handleClick}>Follow</button>;
  }
}

buttonをクリックしたとき３秒後にalertが出るようにしました。
buttonをクリックしたあとKimからParkに変えるとalertには最初クリックしたKimじゃなくParkに表示されます。
これがthisの問題点です。

Hook ルール

React Hooksにルールが何個かあります。これを守るとReat HookのuseState, useEffectが何回呼ばれても状態を正しく維持することができます。
1.
1. 最上位でのみhookを呼び出す必要があります。
if,forまたは入れ子関数（Nested Function）内部ではHookを呼ぶとダメです。
React hookは呼ばれた瞬間依存するため、if,forで実行するとスキップする可能性がありバグになります。
2. React関数内部だけHookを呼ぶことができます。
hookは一般できなjs関数では呼ばれないです。
関数形component、custom hookで呼ぶことができます。

よく使われている React Hook

🧙useState()
useStateはstateを管理してくれる

🧙useEffect()
useEffectはreact componentがレンダリングするとき特定作業（sied effect）を実行できるようにしてくれる
※sied effectとはcomponentがレンタリングされた後非同期で処理されなければならない部分

🧙useRef(),useMemo(), useCallback()