Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lära Rules of Using Hooks | Hooks
Introduction to React

book
Rules of Using Hooks

There are certain rules we must follow while using Hooks to avoid surprises. For the hooks, there are two simple rules:

  1. Only call hooks at the top level;

  2. Only call hooks from React functions.

Top-level means directly inside the React component, and outside of any other code blocks, for example, loops or conditions. The following code shows valid and invalid cases:

js
function Main(props) {
// Correct
const [ text, updateText ] = useState("Example");

// Incorrect
if(true) {
const [ example, setExample ] = useState(0);
}

// Incorrect
for(let i = 0; i < 10; i++) {
useEffect(() => {
console.log(text);
});
}
return <p>{text}</p>;
}

Apart from that, calling React hooks in functions other than React components is also invalid:

js
function randomFunction() {
// Incorrect
const [ count, setCount ] = useState(0);
return 1;
}


function Main(props) {
// Correct, as this function represents a component
const [ text, updateText ] = useState("Example");
return <p>{text}</p>;
}

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 6. Kapitel 4

Fråga AI

expand
ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

some-alt