Tagged with hooks
Custom hooks let you extract reusable stateful logic without changing the component tree structure.
Custom hooks and sharing logic between components
useEffect is a common place for data fetching and subscriptions, but async work must be cleaned up carefully to avoid races and leaks.
Data fetching, async cleanup, and subscriptions with useEffect
Hooks let function components use stateful and lifecycle-like logic without classes, but they have strict usage rules.
Hooks overview, why hooks were introduced, and rules of hooks
useContext shares values across a tree, while useReducer is useful when state transitions are more structured than simple setters.
useContext, useReducer, and useState vs useReducer
useEffect runs side effects after rendering and replaces many class lifecycle use cases in function components.
useEffect basics and how it differs from lifecycle methods
useEffect behavior depends heavily on its dependency array, and many common bugs come from missing dependencies or stale captured values.
useEffect dependency arrays, cleanup, infinite loops, and stale closures
These hooks and helpers solve timing, refs, deferred rendering, and stable identity concerns that basic hooks do not cover.
useLayoutEffect, forwardRef, useImperativeHandle, useTransition, useDeferredValue, and useId
useRef holds mutable values that do not trigger re-renders and is commonly used for DOM access or persistent instance-like values.
useRef, refs vs state, and DOM access in React
useState stores local component state, and updates should be based on immutable patterns and previous state when needed.
useState basics, correct updates, functional updates, and common mistakes
Object and array state require immutable updates, and using multiple state variables can sometimes be clearer than one large state object.
useState with objects, arrays, and multiple state variables