React provides several core hooks that allow developers to manage states, handle side effects, work with contexts, refs, and more. Here's a comprehensive list of these core hooks, along with a brief explanation of each:
1. useState
Manages state in functional components
const [state, setState] = useState(initialValue);
- Used to add local state to a component.
- Returns the current state value and a function to update it.
2. useEffect
Handles side effects in functional components
useEffect(() => { /* Side effect logic */ }, [dependencies]);
- Runs after render to handle operations like data fetching, subscriptions, or DOM updates.
- Dependencies control when the effect runs.
3. useContext
Accesses values from a React context
const value = useContext(MyContext);
- Simplifies consuming values provided by a context without needing a Consumer component.
4. useReducer
An alternative to useState for complex state logic
const [state, dispatch] = useReducer(reducer, initialState);
- Similar to Redux reducers but built into React.
- Suitable for managing state transitions with actions.
5. useRef
Creates a mutable object that persists across renders
const ref = useRef(initialValue);
- Commonly used for DOM manipulation or storing mutable values without triggering re-renders.
6. useMemo
Memoizes expensive calculations to improve performance
const memoizedValue = useMemo(() => computeExpensiveValue(), [dependencies]);
- Ensures a value is recalculated only when its dependencies change.
7. useCallback
Memoizes functions to avoid unnecessary re-creations
const memoizedCallback = useCallback(() => { /* Function logic */ }, [dependencies]);
- Useful when passing functions as props to child components.
8. useLayoutEffect
Runs synchronously after all DOM mutations
useLayoutEffect(() => { /* Synchronous side effects */ }, [dependencies]);
- Similar to useEffect but runs before the browser paints.
9. useImperativeHandle
Customizes the ref exposed by a component
useImperativeHandle(ref, () => ({ customMethod() { /* Custom logic */ } }));
- Used with React.forwardRef to control what the parent component can access.
10. useDebugValue
Custom labels for debugging hooks in React DevTools
useDebugValue(value, formatterFunction);
- Primarily used in custom hooks to provide insight into their state.
11. useId
Generates a unique ID for accessibility or identification purposes
const id = useId();
- Useful for associating labels with form elements.
12. useDeferredValue
Defers the update of a value for better UI performance
const deferredValue = useDeferredValue(value);
- Helpful in making non-urgent updates while keeping the UI responsive.
13. useTransition
Manages state transitions to prioritize rendering
const [isPending, startTransition] = useTransition();
- Allows marking updates as low-priority to improve performance during heavy renders.
14. useSyncExternalStore
Subscribes to an external store
const state = useSyncExternalStore(subscribe, getSnapshot);
- Ensures consistent state with external systems (e.g., Redux or other state management libraries).
15. useInsertionEffect
Injects styles into the DOM before rendering
useInsertionEffect(() => { /* Inject styles */ }, [dependencies]);
- Useful for CSS-in-JS libraries or managing critical styles.
Developers can handle complex logic, manage performance, and make highly reusable, modular parts by combining these hooks.
