What is
React Hooks?

Hooks were introduced in React v16.8. In simple terms, Hooks are Javascript functions that let you “hook into” React state and lifecycle features from functional components. Hooks can be stateful and can manage side-effects.

Some more info on ReactJS Hooks:

• As mentioned in defination, Hooks are Javascript function but they can be only call from the React function Component and not regular Javascript function.
• Hooks let you use state and other React features without writing a class, for example, the state of a component.
• Hooks doesn’t work with class component.
• You can create your own custom Hooks.
• All React packages used need to be 16.8.0 or higher.

ReactJS provides some standard in-built hooks:

1. Basic Hooks
   • useState – To returns a stateful value, and a function to update it.
   • useEffect – To manage side-effects like re-rendering,Mutations, API calls, counters, logging etc.
   • useContext – To returns the current context value for the object.
2. Additional Hooks
   • useReducer – An alternative to useState hook when you have complex state logic.
   • useMemo – To return a memoized value and prevent re-rendering that helps in performance optimizations.
   • useCallback – To return a memoized version of the callback that only changes if one of the dependencies has changed
   • useRef – To return a mutable ref object whose .current property is initialized.
   • useImperativeHandle – To customize the instance value that is exposed to parent components when using ref.
   • useLayoutEffect – Identical to useEffect, but it fires synchronously after all DOM mutations. Use this to read layout from the DOM and synchronously re-render
   • useDebugValue – To display a label for custom hooks in React DevTools.
   • useDeferredValue – To accepts a value and returns a new copy of the value
   • useTransition – To return a stateful value for the pending state of the transition, and a function to start it
   • useId – To generate unique IDs that are stable across the server and client.
3. Library Hooks
   • useSyncExternalStore – To read and subscribe from external data sources.
   • useInsertionEffect – Similar to useEffect, but it fires synchronously before all DOM mutations