Course Content
Introduction to React
Introduction to React
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:
- Only call hooks at the top level;
- 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:
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:
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>;
}
Everything was clear?
Thanks for your feedback!
SectionΒ 6. ChapterΒ 4