useState: Used to manage state in a functional component. It returns an array with two elements, the current state value and a function to update it.
useEffect: Used to handle side effects in functional components, such as making API calls or updating the document title. It takes a callback function that will run after every render.
useContext: Used to access data from the React context API. It takes a context object as its argument and returns the current value for that context.
useReducer: Similar to useState, but used for complex state management. It takes a reducer function and an initial state value, and returns the current state value and a dispatch function to update the state.
useCallback: Used to memoize a function so that it is only re-created if its dependencies change. It takes a function and an array of dependencies and returns a memoized version of the function.
useMemo: Used to memoize a value so that it is only re-computed if its dependencies change. It takes a value-generating function and an array of dependencies and returns the memoized value.
useRef: Used to create a reference to a DOM element or a value that persists across renders. It returns a mutable object that can be used to store a value for the lifetime of the component.
Custom hooks: are functions that allow you to extract and reuse state logic and side effects across multiple components. They start with the word use and can call any of the built-in hooks or other custom hooks
useImperativeHandle: Used to control the behavior of imperative code when using a component as a child component.
useLayoutEffect: Similar to useEffect, but it fires synchronously after all DOM updates.
useDebugValue: Used to display a label for a custom hook in the React DevTools for easier debugging.
These are the most commonly used React hooks, and there are many others that can be used to add specific functionality to functional components.
Top comments (0)