react-hooks

useContext provides global state management by reading and subscribing to a React Context object, avoiding prop drilling. It allows components to access shared data directly without passing props through intermediate elements.

To create a custom React Hook, encapsulate reusable state logic into a JavaScript function prefixed with 'use', leveraging useState or useEffect. This process improves code reusability and maintainability across components.

Use useReducer instead of useState for state management when dealing with complex state logic involving multiple sub-values or when the next state depends on the previous one. It provides a more predictable state transition structure.

Optimize React performance using useMemo to memoize expensive calculations and useCallback to memoize callback functions, preventing unnecessary component re-renders. Apply these hooks strategically based on dependency arrays.

Best practices for useEffect dependency arrays include listing all reactive values used inside the effect, adhering to hook rules, and ensuring stable references. This prevents stale closures and infinite render loops during side effect handling.

useContext provides global state management by reading and subscribing to a React Context object, avoiding prop drilling. It allows components to access shared data directly without passing props through intermediate elements.