そもそもReact Hooksって何?
React Hooksのhookとは、2019年2月リリースのReact16.8から追加された、state などの React の機能を、クラスを書かずに使用できる機能のことです。
メリットとして、関数コンポーネントにstateと持たせたり、ライフサイクルに応じた処理を適宜実装することができます。
これにより記述がより簡潔に、Reactの学習コストも落とすことができました🥺
React Hooksを使ってみよう
環境構築
今回は時短の為にViteというビルドツールを使用していきます。
ViteとはVue.jsの開発者Evan You氏が中心となって開発している、フロントエンドのビルドツールになります。
詳しく知りたい方は下記をご覧ください。
$ npx create vite@latest
? Project name:react-hooks-introduction
? Select a freamwork:react
? Select a variand:javascript
これでフレームワークの作成をすることができます。
その後、作成してディレクトリに移動してセットアップしてサーバーを起動してください。
コマンドは下記になります。
$ cd react-hooks-introduction
$ npm i
$ npm run dev #viteの場合はstartではなくdevなので注意
下記のようにサーバーを立ち上げられたらOKです！
そして、src/App.jscファイルを開いてください。
ビルドツールで立ち上げるとuseStateがimportされていますが、
それらを削除して下記の状態にしてください。
import './App.css'
function App() {
return <div className='App'></div>
}
export default App
それでは順に学んでいきましょう！
useState
useStateとは、関数コンポーネントのstateを保持したり、更新したりするためのフックになります。
import { useState } from 'react'
import './App.css'
function App() {
const [count,setCount] = useState(0)
const handleClick = () => {
setCount(prev => prev + 1)
}
return (
<>
<h1>useState</h1>
<button onClick={handleClick}>count is {count}</button>
</>
)
}
export default App
上記のコードでボタンをクリックしてcountが増えていくページが作成されると思います。
コードについて軽く補足していきます。
const [count,setCount] = useState(0)
こちらは第１引数に現在の値と、第２引数に更新関数を返しています。
countにはuseStateの引数が初期値として格納されます。
また、分割代入を使用しているので分割代入という言葉自体分からない方はこちらを参考にしてください！
const handleClick = () => {
setCount(prev => prev + 1)
}
ボタンをクリックした際に、上記の更新するための関数が走り値が更新されます。
またこの際に、
<button onClick={handleClick}>count is {count}</button>
ではなく
<button onClick={handleClick()}>count is {count}</button>
と記述してしまうと、レンダリングされた際にhandleClickが走るので注意してください！
useEffect
useEffectは、関数コンポーネントで副作用を制御できるフックとなります。
import { useEffect, useState } from 'react'
import './App.css'
function App() {
const [count,setCount] = useState(0)
const handleClick = () => {
setCount(prev => prev + 1)
}
useEffect(() => {
console.log('Hello useEffect')
},[count])
return (
<>
<h1>useState,UseEffect</h1>
<button onClick={handleClick}>count is {count}</button>
</>
)
}
export default App
補足していきます。
useEffect(() => {
console.log('Hello useEffect')
},[count])
第1引数には実行させたい副作用関数を記述して、 第2引数には副作用関数の実行タイミングを制御する依存データを記述します。
今回でいくと、countが第２引数に当たるのでボタンをクリックするたびに
コンソールに`Hello useEffect'が出力されます。
useContext
useContextは、複数のコンポーネント間で共通して利用したいデータを管理できるフックになります。
これによってバケツリレー式でpropsを渡しているものがグローバルに管理することができ、データの管理がわかりやすくなりました！
データ管理するファイルですがApp.jsxでも可能ですが、今回はmain.jsx
に格納していきます。
import React, { createContext } from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
const comicInfo = {
title: '呪術廻戦',
author: '芥見下々',
}
// グローバルに管理したいcontextを生成する
const ComicContext = createContext(comicInfo)
ReactDOM.createRoot(document.getElementById('root')).render(
// valueに共有したいデータも定義する必要があるので注意
<ComicContext.Provider value={comicInfo}>
<React.StrictMode>
<App />
</React.StrictMode>,
</ComicContext.Provider>
)
export default ComicContext
それでは実際に使っていきましょう！
import { useContext, useEffect, useState } from 'react'
import './App.css'
import ComicContext from './main'
function App() {
const [count,setCount] = useState(0)
const comicInfo = useContext(ComicContext)
const handleClick = () => {
setCount(prev => prev + 1)
}
useEffect(() => {
console.log('Hello useEffect')
},[count])
return (
<>
<h1>useState,UseEffect</h1>
<button onClick={handleClick}>count is {count}</button>
<hr/>
<h1>useContext</h1>
<p>{comicInfo.title}</p>
<p>{comicInfo.author}</p>
</>
)
}
export default App
const comicInfo = useContext(ComicContext)
実際の画面
今回の場合はmain.jsxとApp.jsxしかないのであまり恩恵を感じにくくpropsで渡した方が早いですが、
componentの構造が深くなっていくとややこしくなっていくのでその場合は恩恵を感じられると思います。
どの場面で使われるかというとECサイトやSNSなどでいくと、ログイン情報などの認証情報はどの
コンポーネントでも使用する場合が多いのでuseContextやReduxが使用されます。
因みにQiita社内でもuseContextは多用されてます！
最後に
今回紹介した、Hooksが基本かつ頻出する機能になります。
次回は、まだ紹介していないuseReducer useCallback useMemo useRef
について紹介していこうと思います！
今回の記事が参考になったら幸いです。
参考記事
フック API リファレンス
フック早わかり(React公式)
5分でわかるReact Hooks
【初心者向け】 React Hooks とは?