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
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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
99
1
2
3
4
5
6
7
8
9
10
11
12
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>; 
}