What are Hooks?

Hooks are functions whose names start with use. You already know useState. In this lesson: useEffect, useRef, useReducer and Hooks of your own. useContext follows in Advanced React.

React stores a component's Hook data in slots, matched purely by call order: the first useState call gets slot 1, the second slot 2. Skip a Hook on one render and every Hook after it reads the wrong slot.

• Only call Hooks at the top level of a component or custom Hook.
• Never inside conditions, loops, nested functions, or after an early return.
• Need a condition? Put it inside the Hook (for example inside the effect), not around the call.