📄️ Hooks
In React, a Hook is a special function that allows you to "hook into" React features like state and lifecycle methods from functional components. Hooks were introduced in React 16.8 to enable stateful logic and lifecycle features in functional components, without converting them to class components.
📄️ useState
The useState hook is one of the most commonly used hooks in React. It allows you to add state to functional components. Before hooks were introduced, state could only be used in class components. The useState hook makes it possible to manage state in a more straightforward way within functional components.
📄️ useEffect
The useEffect hook is a powerful tool in React that allows you to perform side effects in functional components. Side effects could be anything from fetching data and updating the DOM to subscribing to an event or manually changing the document title. Before hooks, these side effects were handled in lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount in class components.
📄️ useContext
The useContext hook in React is used to access the value of a context without wrapping a component in a Context.Consumer. It allows you to easily access data that's been provided by a Context.Provider higher up in the component tree. This is particularly useful for sharing global data like theme, user authentication, or language settings across multiple components.
📄️ useRef
The useRef hook in React is used to access and interact with a DOM element or to keep a mutable reference to a value that doesn't trigger a re-render when it changes. Unlike state variables, changes to a ref do not cause the component to re-render. This makes useRef useful for various scenarios, such as focusing on input fields, measuring DOM elements, or keeping track of previous props/state.
📄️ useCallback
The useCallback hook in React is used to memoize a function, so that the function instance remains the same if its dependencies haven't changed. This is useful for optimizing performance, particularly in scenarios where passing a callback to child components could cause unnecessary re-renders if the function instance changes.
📄️ useReducer
The useReducer hook in React is used for state management and is an alternative to useState. It's particularly useful when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one. useReducer is also handy when you want to optimize performance for components that trigger deep updates because you can pass down dispatch instead of callbacks.