Advanced Reactjs Hooks

Initially React features such as state and lifecycle methods are available in class-based components only but after the release of hooks we can manage everything like state and lifecycle in functional components even in a better and efficient way than class-based components.

There are many common hooks like useEffect and useState but in this blog, we will focus on some advanced hooks.

1.UseReducer

It is an alternative to useState but it is preferred when you have complex state logic and when your next state depends on the previous one.

const [state, dispatch] = useReducer(reducer, initialArg, init);

It is a great way to simplify Api and express intention while consolidating more complex state interactions in a reducer.

2.UseContext

It is very useful when you need to pass the props through many nested children, it solves the props drilling problem. It makes code cleaner to consume props in context API.

You can consume the props just by one line of code without passing the props in multiple children where that is not needed.

const value= useContext(Provider_name)

The useContext accepts the value provided by React.

3.useRef

It is used to keep the reference of dom element for focussing on the element or performing some dom manipulation.

Below example is taken from React docs:

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

Here on clicking the button focus will come on the input element.

4.UseSelector

This hook is really useful when you use redux state management in your project. Instead of writing long code in class-based components to connect a component with global state, useSelector hook to make it easier with one line of code.

It is equivalent of map state to props in a class-based component. It provides a function argument that returns the part of the state you want.

Suppose there are two keys in your state (currentUser,feeds).By using useSelector you can have redux state in any compoent by one line of code.

const currentUser= useSelector(state => state.currentUser)

const feeds=useSelector(state=>state.feeds)

conclusion:-

These days functional components are not dumb components anymore. These are the replacement of class-based components which is possible only by the hooks. There are several reasons developers are using functional components than class based now.You dont have to worry about "this" keyword, no method binding require. I have mentioned the most compelling reasons that made developer to switch to react hooks. In react docs many interesting functionalities are given with react hooks.