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 →|