What are hooks in React js?

React Hooks a brief description of react hooks.

Hooks in Reactjs facilitates us to achieve everything which we can do using class and functional components. It has been introduced in latest version of Reactjs which is very efficient and easy to use as compared to earlier introduced methods in reactjs. Please have a look below points to get an understanding about hooks in react:

 

React Hooks:

  Hooks are a new feature addition in React version 16.8

  They allow you to use React without having to write a class.

  Avoid the whole confusion with 'this' keyword 

  Allow you to reuse stateful logic 

  Organize the logic inside a component into reusable isolated units. 

 

Rules of Hooks:

  Only call hooks at the top level:- 

    Don't call Hook inside loops, conditions or nested functions.

  Only call hooks from react functions:- 

    Call them from React functional components and not just any regular javascript function.

 

useState Hook:

  The useState hook lets you add state to functional component.

  In classes, state is always an object.

  With the useState hook, the state doesn't have to be an object. 

  The useState hook returns an array with 2 elements. 

  The first value is the current value of the state, and the second value is a State setter function.

  When dealing with objects or arrays, always make sure to spread your state variable and 

  then call the setter function. 

 

useEffect Hook:

  The effect hook lets you perform side effects in functional components.

  It is a close replacement for componentDidMount, componentDidUpdate and componentWillUnmount.

 

  Run effect hook conditionally by passing a second argument, react will look and 

  effect hook run if value changes.

 

useEffect with Cleanup:

  Return a function within useEffect which will work as unmount hook.

 

Multiple useEffect:

  If you require to have multiple useEffect then group same type of code in separate useEffect groups.

 

useContext Hook:

  Context provides a way to pass data through the component tree without having to pass 

  props down manually at every level.

 

useReducer Hook:

  useReducer is a hook that is used for state management in React.

  useReducer  is related to reducer functions

  useReducer(reducer, initialState) // Accepts two parameter

  reducer(currentState, action)

 

useState vs useReducer:

  useSate is good for Number, String and Boolean but useReducer is good for Object and Array.

  useState is for one or two state transition but if there are many then useReducer is best.

  No bussines logic can be used with useState but a complex logic can be used with useReducer.

  useState is good for local state but for global state useReducer will be a good choice.

 

React.memo(): 

  To refresh only those components which state has been changed/updated. 

 

useCallback hook:

  It is a hook that will return a memorized version of the callback function that only changes if one of the dependencies has changed.

  It is useful when passing callbacks to optimized child components that rely on reference equality to prevent unncessary renders.

  It is used to resolve performance issue and stop unnncessary render of components.

 

useMemo Hook:

  useCallback caches the provided function itself while useMemo invokes provided function and caches its results.

  If you want to cache a function use callback and if you need to invoke a function and cache its result use memo.

 

useRef Hook:

  This hook lets us access to DOM node directly from functional component. like focusing text input on page load.

 

Custom Hooks:

  A custom hook is basically a javascript function which starts with 'use'. 

  A custom hook can also other hooks if required.

  It can be used to share logics among components and an alternative to HOCs and Render props.