フックのルール
フックは再利用可能な UI ロジックを表す JavaScript の関数として定義されており、呼び出せる場所に関する制約があります。
フックはトップレベルでのみ呼び出す
use で始まる関数名を持つ関数は React ではフック (hook) と呼ばれます。
ループ、条件分岐、ネストされた関数、try/catch/finally ブロックの内部でフックを呼び出してはいけません。代わりに、フックは常に React 関数のトップレベルで、早期 return を行う前に行います。フックは React が関数コンポーネントをレンダーしている間にのみ呼び出すことができます。
function Counter() {
// ✅ Good: top-level in a function component
const [count, setCount] = useState(0);
// ...
}
function useWindowWidth() {
// ✅ Good: top-level in a custom Hook
const [width, setWidth] = useState(window.innerWidth);
// ...
}以下のような場合にフック（use で始まる関数）を呼び出すことはサポートされていません。
- 🔴 条件やループの内部でフックを呼び出してはいけない。
- 🔴 条件付き
return文の後でフックを呼び出してはいけない。 - 🔴 イベントハンドラ内でフックを呼び出してはいけない。
- 🔴 クラスコンポーネント内でフックを呼び出してはいけない。
- 🔴
useMemo、useReducer、useEffectに渡される関数内でフックを呼び出してはいけない。 - 🔴
try/catch/finallyブロック内でフックを呼び出してはいけない。
これらのルールを破ると、以下のエラーが表示される可能性があります。
function Bad({ cond }) {
if (cond) {
// 🔴 Bad: inside a condition (to fix, move it outside!)
const theme = useContext(ThemeContext);
}
// ...
}
function Bad() {
for (let i = 0; i < 10; i++) {
// 🔴 Bad: inside a loop (to fix, move it outside!)
const theme = useContext(ThemeContext);
}
// ...
}
function Bad({ cond }) {
if (cond) {
return;
}
// 🔴 Bad: after a conditional return (to fix, move it before the return!)
const theme = useContext(ThemeContext);
// ...
}
function Bad() {
function handleClick() {
// 🔴 Bad: inside an event handler (to fix, move it outside!)
const theme = useContext(ThemeContext);
}
// ...
}
function Bad() {
const style = useMemo(() => {
// 🔴 Bad: inside useMemo (to fix, move it outside!)
const theme = useContext(ThemeContext);
return createStyle(theme);
});
// ...
}
class Bad extends React.Component {
render() {
// 🔴 Bad: inside a class component (to fix, write a function component instead of a class!)
useEffect(() => {})
// ...
}
}
function Bad() {
try {
// 🔴 Bad: inside try/catch/finally block (to fix, move it outside!)
const [x, setX] = useState(0);
} catch {
const [x, setX] = useState(1);
}
}これらの間違いを捕捉するために eslint-plugin-react-hooks プラグインが利用可能です。
React の関数からのみフックを呼び出す
通常の JavaScript 関数からフックを呼び出さないでください。代わりに以下ようにします。
✅ React の関数コンポーネントからフックを呼び出す。 ✅ カスタムフックからフックを呼び出す。
このルールに従うことで、コンポーネント内のすべてのステートフルなロジックがそのソースコードから明確に見えることが保証されます。
function FriendList() {
const [onlineStatus, setOnlineStatus] = useOnlineStatus(); // ✅
}
function setOnlineStatus() { // ❌ Not a component or custom Hook!
const [onlineStatus, setOnlineStatus] = useOnlineStatus();
}