More than 3 years have passed since last update.

useStateとか、Hookとかに拒否反応を示していた私が開眼した件👁

Posted at 2021-03-14

useStateってよく目にするけどよく分からない（嫌い😬）

私はプログラミング初学者です。現在はReactでTODOリストなど簡単なコードの実装をして勉強しています。勉強する中で、「useState」という文字をよくコード内で目にするのですが、正直この子の正体がよく分かっていません。よく分かっていないまま勉強を進めてきたら、useStateさんを目にする度に拒否反応を示す私がいることに気づきました^^; ここで克服しなければ！useStateさんと仲良くならなければ！と思い、今自身で調べながらQiitaへ投稿してみます。同じようにuseStateさんとまだ仲良くなれていない初学者の方の手助けになれば幸いです。本投稿は、私個人の理解と偏見と感覚で作成していますので、多少単語の意味合いに相違があるかもしれませんが、ご理解ください🙏

開発環境

MacOS
VScode
React
Github
Chrom

useStateって一体何者なのか

Hook(フック)です。フックはいろんな種類があるのですが、そのうちの一つです。
この記事の下の方にHookをいくつか書きましたので参照ください。

Hook(フック)って一体何者なのか

フック (hook) は React 16.8 で追加された新機能です。state などの React の機能を、クラスを書かずに使えるようになります。
フックとは、関数コンポーネントに state やライフサイクルといった React の機能を “接続する (hook into)” ための関数です。フックは React をクラスなしに使うための機能ですので、クラス内では機能しません。
要は、useStateはフックなんです、フックはいろんな種類があります。

基本のフック
useState
useEffect
useContext
追加のフック
useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue

とりあえず、初学者は上記のフックが存在するということだけ何となく分かっていればいいのではないでしょうか。私は今のところ、useStateしか知りません😅

クラスコンポーネント　と　関数コンポーネント

まず、コンポーネントって何？
コンポーネントとは、「（何かの）部品」。難しく考えず、そう信じていれば大丈夫。混乱するから初学者はこれ以上突き詰めなくてよし。
関数コンポーネントは、簡潔なコードが書ける。だからクラスコンポーネントより好まれる傾向にある。
クラスコンポーネント
昔（そんなに昔でもないけど）は主流だったが、今はサブキャラとなったコンポーネント。
関数コンポーネント
近年登場したコンポーネント。クラスコンポーネントに代わり今の主流となっている。useStateは、関数コンポーネントの派閥に属する。
（関数コンポーネントは、Hookを使える⇨useStateはHookの一つ。）
とりあえずの結論
関数コンポーネントをどんどん使お！

useStateを使った実装例（超簡単なコード）

つべこべ言わずに公式を覚えましょう

【公式1】 setState関数をインポートする

import React, {useState} from 'react';

【公式2】useState関数を定義する

const [name, setName] = useState('yui');

【公式3】useState関数の呼び出し

<input /**中略**/ onClick = {()=> setName(name)} />

コード（useStateを使って適当にコードを書いてみました。）

import React, {useState} from 'react';
import "./styles.css";

const App = () => {
const [name, setName] = useState('yui');
  return (
    <div className="App">
      <h1>こんにちは、{name}さん</h1>
      <button onClick = {()=> setName(name + 'i')}>ボタン</button>
    </div>
  );
};

export default App;