React Hooks

React Hooks are special functions introduced in React 16.8 that allow you to use state and other React features (like lifecycle methods, context, and refs) within functional components without writing a class. They simplify code, improve reusability, and promote a functional programming style.

Core Concepts

Enabling Functional Components: Before Hooks, state and lifecycle features were only available in class components. Hooks allow functional components to be "stateful".

Reusing Logic: Hooks provide a way to extract stateful logic into reusable functions (custom hooks), making it easier to share behavior across components.

Simplifying Code: Hooks eliminate the need for class components, reducing boilerplate code and the complexity associated with this bindings in JavaScript classes.

Organizing Effects: Hooks like useEffect allow related logic (e.g., data fetching and cleaning up a subscription) to be organized together, rather than being split across different lifecycle methods (like componentDidMount and componentWillUnmount) in class components.

Essential Rules

To work correctly, Hooks must follow specific rules:

Only call Hooks at the top level: Do not call Hooks inside loops, conditions, or nested functions. React relies on the consistent order of Hook calls during each render to correctly associate state and effects.

Only call Hooks from React functions: Hooks can only be used in React function components or custom Hooks, not regular JavaScript functions.

Primary Built-in Hooks

React provides several built-in Hooks for common tasks:

useState: Manages component-specific state. It returns a pair: the current state value and a function to update it.

useEffect: Handles side effects, such as data fetching, subscriptions, or manual DOM manipulations, after the component renders. It can be controlled by a dependency array to run only when specific values change.

useContext: Subscribes to React's Context API, allowing components to access global data without prop drilling.

useReducer: An alternative to useState for managing more complex state logic, often involving multiple sub-values or when the next state depends on the previous one.

useRef: Returns a mutable ref object that persists across renders and can be used to access DOM elements or store any mutable value that doesn't trigger a re-render when updated.

useMemo: Optimizes performance by memoizing the result of an expensive calculation, re-computing only when its dependencies change.

useCallback: Optimizes performance by memoizing a function definition, ensuring the same function instance is used across renders unless its dependencies change.