フックはJavaScript関数を使って定義されますが、どこで呼び出せるかに制限のある、特殊な再利用可能なUIロジックを表します。
フックはトップレベルでのみ呼び出す
名前がuseで始まる関数は、Reactではフックと呼ばれます。
ループ、条件、ネストされた関数、またはtry/catch/finallyブロックの内部でフックを呼び出さないでください。代わりに、必ずReact関数のトップレベルで、早期リターンの前にフックを使用してください。フックは、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();
}