Questions and answers
Here are some questions and answers to refresh your knowledge:
- What is a React hook?
A React hook is a special function that allows us to have persistent states for a function component. The calling order of hooks is used as an internal key of the states, thus, when we use hooks, we don't need to specify a key. We can have as many hooks as we want under one function component, and each hook can be used for a different purpose.
- How can we avoid conditional hooks?
Each hook with a specific calling order gets stored under the hook list. React doesn't allow the change of this calling order at runtime, thus we should avoid it when using hooks inside a condition, a loop, or any structure that varies its calling order. Instead, we can move all hook statements to the front section of the function to pre-bake their calling orders while leaving the conditional logic afterward before the return statement.