React Hooks
#React
Hooks
https://reactjs.org/docs/hooks-intro.html
v16.7で導入予定の機能
classを使わずに、state等を利用したコンポーネントを書ける。
コンポーネントの階層を変えることなく、コンポーネント間でロジックを再利用できる。
State Hook
https://reactjs.org/docs/hooks-state.html
関数コンポーネントでstateを利用できるようにする。
code:javascript
import {useState} from 'react';
function Counter({ initialState = 0 }) {
const count, setCount = useState(initialState);
return <button onClick={() => setCount(count + 1)}>{{ count }}</button>
}
Effect Hook
useEffect(() => any, any[])
コンポーネントの初回描画および更新時に、副作用を実行する際に利用する。
テスト
react-hooks-testing-library
tng-hooks
https://github.com/getify/tng-hooks
eslint
eslint-plugin-react-hooks
ライブラリ
use-events
React Hook Form
jolly-roger
A micro-framework on top of React hooks
rxjs-hooks
react-hanger
A collection of useful React hooks
react-async-hooks
react-hooks-async
参考
Rules of Hooks - React
awesome-react-hooks
React 16.8: 正式版となったReact Hooksを今さら総ざらいする
実践: React Hooks
(翻訳) React Hooks は魔法ではなく、ただの配列だ
Advanced React Hooks
Discovering patterns with React hooks
Do React Hooks Replace Redux?
Do React Hooks Replace Higher Order Components (HOCs)?
useEffect完全ガイド
技術的負債を作らないためのReact Hooks入門