DEV Community

Imran Hasan
Imran Hasan

Posted on

React Hooks

Hooks are the new feature which is introduced in the React 16.8 version. It allows you to use state and other React features without writing a class. Hooks are the functions which "hook into" React state and lifecycle features from function components. It does not work inside classes.
Hooks are backward-compatible, which means it does not contain any breaking changes. Also, it does not replace your knowledge of React concepts.
When to use a Hooks
If we write a function component, and then we want to add some state to it, previously we do this by converting it to a class. But, now we can do it by using a Hook inside the existing function component.
Rules of Hooks

  1. Only call Hooks at the top level Do not call Hooks inside loops, conditions, or nested functions. Hooks should always be used at the top level of the React functions. This rule ensures that Hooks are called in the same order each time a component renders.
  2. Only call Hooks from React functions We cannot call Hooks from regular JavaScript functions. Instead, we can call Hooks from React function components. Hooks can also be called from custom Hooks.

Oldest comments (0)