In this part, we will start learning about react hooks, its types and working. React Hooks are introduced in react 16.8 version, If you don’t want to use class component just for state then react hooks help you to do that. Now you can use state in functional component using hooks. And also you can’t use hooks inside the class component.

What Are Hooks?

Hooks is the special function that allows us to hook into the React features. For example, useState is a Hook that lets you add React state to function components. If we need to use state in our application then we had to convert our function to class component but with the help of hooks we can use state in functional component as well.

For example,

Working with classes.

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      vehicleId: 0
    };
  }

  render() {
    return (
      <div>
        <h1>Update Vehicle ID</h1>
        <p>vehicleId: {this.state.vehicleId}</p>
        <button onClick={() => this.setState({ vehicleId: this.state.vehicleId + 1 })}>Click</button>
      </div>
    );
  }
}

As we can see, working with class component to access state we have too lengthy code, class component needs to add constructor, this keyword, and need super() with props. So all these things becomes complex, no doubt they will work, but it’s not optimized and efficient to do some task we need simple code and logic.

Let’s see same work with functional component with hooks:

function App() {
  const [vehicleId, setVehicleId] = useState(0);

  return (
    <div>
      <h1>Update Vehicle ID</h1>
      <p>vehicleId: {vehicleId}</p>
      <button onClick={() => setVehicleId(vehicleId + 1)}>Click</button>
    </div>
  );
}

Okay, this code looks far better than above one, because it is simple, Short and actually much more efficient than before one. This only example is able to show you the actual power of react hooks, if you compare both codes, then you will find out that we don’t need any extra constructor or this keyword here to access the hooks. We just need to import the package or library for hooks. By the way, both codes have similar outputs, but simply hooks make your life easy.

There are some important things you should remember before using the hooks:

• Hooks only are usable on React version 16.8 or above.
• Hooks can be used in only functional components.
• Hooks should not be called in loop, nested function etc.
• Hooks must be declared on the top of your component.
• Hooks can call other hooks as well.
• Hooks don’t contain any breaking changes.
• You can try Hooks in a few components without rewriting any existing code.

Pre-requisites for React Hooks

1. Node version 6 or above
2. NPM version 5.2 or above
3. Create-react-app tool for running the React App

What do React Hook change? **Everything!

• No need for class components!
• No more, ’this’ keyword!
• No more Redux!
• No more lifecycle methods!
• No more props drilling!

Benefits To Use React Hooks:

• Improves code reusability.
• Makes Better code composition
• Makes Better defaults;
• With the use of custom hooks, non-visual logic can be shared.
• Flexibility in moving up and down the component tree.

There are some basic hooks which you should know and practice it:

• useEffect()
• useContext()
• useReducer()
• useState()

These are some basic hooks we have seen, Also there are some more advanced hooks also available:

• useCallback
• useMemo
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue
• useDeferredValue
• useTransition
• useId

We will learn each and every hook in detail in our future posts, so stay tuned…..

Watch video introduction for hooks here: