caiowakamatsu
1c71f35e1d
All checks were successful
Build Hugo Site / build (push) Successful in 10s
48 lines
850 B
Markdown
48 lines
850 B
Markdown
---
|
|
title: "React Hooks Complete Guide"
|
|
date: 2024-07-25
|
|
categories: ["tech", "tutorial"]
|
|
tags: ["react", "hooks", "frontend"]
|
|
---
|
|
|
|
# React Hooks Complete Guide
|
|
|
|
Master React Hooks with practical examples and best practices.
|
|
|
|
## Essential Hooks
|
|
|
|
### useState
|
|
```jsx
|
|
const [count, setCount] = useState(0);
|
|
```
|
|
|
|
### useEffect
|
|
```jsx
|
|
useEffect(() => {
|
|
document.title = `Count: ${count}`;
|
|
}, [count]);
|
|
```
|
|
|
|
### useContext
|
|
```jsx
|
|
const theme = useContext(ThemeContext);
|
|
```
|
|
|
|
## Custom Hooks
|
|
|
|
```jsx
|
|
function useLocalStorage(key, initialValue) {
|
|
const [value, setValue] = useState(() => {
|
|
return localStorage.getItem(key) || initialValue;
|
|
});
|
|
|
|
const setStoredValue = (newValue) => {
|
|
setValue(newValue);
|
|
localStorage.setItem(key, newValue);
|
|
};
|
|
|
|
return [value, setStoredValue];
|
|
}
|
|
```
|
|
|
|
Hooks make React development so much cleaner! |