Built-in hooks and their use cases
| Command | Description |
|---|---|
const [state, setState] = useState(initial) | Component state |
setState(newValue) | Replace state |
setState(prev => prev + 1) | Update based on previous |
| Command | Description |
|---|---|
useEffect(() => {}) | Run on every render |
useEffect(() => {}, []) | Run once on mount |
useEffect(() => {}, [dep]) | Run when dep changes |
useEffect(() => { return () => {} }) | Cleanup function |
| Command | Description |
|---|---|
const ctx = createContext(default) | Create context |
<Ctx.Provider value={val}> | Provide value |
const val = useContext(Ctx) | Consume context |
| Command | Description |
|---|---|
const ref = useRef(initial) | Mutable ref object |
ref.current | Access current value |
<div ref={ref}> | Attach to DOM element |
| Command | Description |
|---|---|
useMemo(() => compute(), [deps]) | Memoize expensive computation |
useCallback(fn, [deps]) | Memoize function reference |
| Command | Description |
|---|---|
const [state, dispatch] = useReducer(reducer, initial) | Complex state logic |
dispatch({ type: "ACTION" }) | Send action to reducer |