What is a Hook in React?

Hooks are one of the most powerful features in React. Introduced in React 16.8, Hooks let you use state and other React features inside function components — without writing a class! Some built-in hooks include:

• useState() – for state management
• useEffect() – for side effects (like fetching data)
• useContext() – for accessing context

Why Hooks?

Before Hooks, if you needed state or lifecycle methods, you had to use class components. With Hooks, function components can do everything a class component can do — and more — with cleaner and easier-to-read code.

React Hook Rules

To use Hooks correctly, keep in mind these three rules:

• ✅ Hooks can only be called inside function components.
• ✅ Hooks must be called at the top level of the component.
• ❌ Don’t use hooks inside loops, conditions, or nested functions.
• ✅ Hooks must always be used in the same order.
• ⚠️ Hooks do not work in class components.