10 React Hooks in General

The react hook is the function that allows you to use the state and react feature from the function base component (FOC). It provides you the lower-level feature of React outside the context of the component.

To use react Hooks, you can call them at the top level of the functional component.

In the past, stateful logic was a couple to the class-based components. But… react hooks introduced in React 16.8 version, provide the low-level function without writing class. Below are the react general hooks that you can use in a function-based component.

Sr#	React Hooks	Description	Read more
1.	useState	Handle reactive data. When data (state) changes, it re-render the UI. In this way latest changes are reflected to the end user.	Read more →
2.	useEffect	It is used to implement logic for component lifecycle. The three lifecycle methods are; component is added to the UI, reactive data (state) changes, commponent removed from the UI.	Read more →
3.	useContext	Share data without passing props throughout the entire component tree.	Read more →
4.	useReducer	Different way to manage state compare to usestate hook. Instead of updating the UI directly, we dispatch actions to the reducer function that decide how to compute next state.	Read more →
5.	useCallback	Memorize the entire function in order to avoid unnessary render of the child component.	Read more →
6.	useMemo	Optimize computation cost that are hurting performance.	Read more →
7.	useRef	immutable object keep the same reference between renders / Grab HTML elements from the DOM.	Read more →
8.	useLayoutEffect	Similar to useEffect hook. It runs after the component render but before painting to the screen.	Read more →
9.	useDebugValue	When building your own custom hooks, useDebugValue assign a custom lable when preview it in react dev tool.	Read more →
10.	useImperativeHandle	Expose the DOM element of react component so that it can be access by the consumers.	Read more →