## What are React Hooks?
React Hooks are functions that let you use state and other React features in functional components without writing classes. They fundamentally changed how developers write React applications.
Before Hooks (React 16.8, 2019), you needed class components for state. Hooks make functional components just as powerful while being simpler.
## Why They Matter
**Before Hooks** (Class Component):
```javascript
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return <button onClick={() => this.setState({ count: this.state.count + 1 })}>
{this.state.count}
</button>;
}
}
```
**With Hooks** (Functional Component):
```javascript
function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
```
Same functionality, 70% less code, no confusing `this` keyword.
## The Main Hooks
**useState**: Add state to your component
```javascript
const [count, setCount] = useState(0);
const [name, setName] = useState('');
```
**useEffect**: Handle side effects (data fetching, subscriptions, timers)
```javascript
useEffect(() => {
document.title = `Count: ${count}`;
}, [count]); // Runs when count changes
```
**useContext**: Access context without nested components
```javascript
const theme = useContext(ThemeContext);
```
## Custom Hooks: The Real Power
Create reusable logic across components:
```javascript
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch(url)
.then(res => res.json())
.then(data => {
setData(data);
setLoading(false);
});
}, [url]);
return { data, loading };
}
// Use in any component
const { data, loading } = useFetch('/api/user');
```
Extract component logic into reusable functions. This is the real game-changer.
## The Rules
1. **Only call Hooks at the top level** - Never in loops or conditions
2. **Only call from React functions** - Components or custom hooks
These rules ensure Hooks work correctly. ESLint enforces them automatically.
## Real-World Impact
Airbnb migrated from classes to Hooks and reported:
- 30-40% less component code
- Improved performance
- Easier onboarding for new developers
- More reusable logic
## Common Patterns
**Form Handling**: Extract form logic into a custom hook
**Window Size**: Track window dimensions across components
**API Data**: Reusable data fetching logic
Hooks are not just a feature - they are the modern way to write React. Once you understand them, you will never want to go back to classes.
