Rules of using Hooks in React

Hooks are a new addition in React v16.8.0. They are special functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes, they let you use React without writing a class.

With Hooks, you can extract stateful logic from a component so it can be tested independently and reused. Hooks allow you to reuse stateful logic without changing your component hierarchy. This makes it easy to share Hooks among many components or with the community.

Hooks are JavaScript functions, but you need to follow two rules when using them:

1. Only Call Hooks at the Top Level

Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns.

By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple ‘useState’ and ‘useEffect’ calls.

Example

❌️ Don’t use a Hook inside a condition like this:

️✅Instead, we should put that condition inside our Hook:

React relies on the order in which Hooks are called. if we put a Hook call inside a condition, the name !== ' ' condition is ‘true’ on the first render, so we are able to run this Hook.

However, on the next render the user might clear the form, making the condition ‘false’. Now that we skip this Hook during rendering, every next Hook call after the one we skipped would also shift by one, leading to bugs.

You can read more details in depth here

______________________________

2. Only Call Hooks from React Functions

Don’t call Hooks from regular JavaScript functions. Instead, you can:

✅ Call Hooks from React function components.
✅ Call Hooks from custom Hooks

Function components in React look like this:

Or like this:

However, you don’t need to worry about this problem if you use the provided ESLint Plugin.

ESLint Plugin

React provides an ESLint plugin called:

eslint-plugin-react-hooks

To enforce these two rules automatically and avoid bugs. You can add this plugin to your project if you would like to try it.

This plugin is included by default in ‘Create React App’

Note: React v16.8.0 is the first release to support Hooks. When upgrading, don’t forget to update all React packages, including React DOM.

React Native supports Hooks since the v0.59 release: React Native

Do we need to rewrite all existing Class components to Hooks?

The answer is No, we don’t need to do that. There are no plans to remove classes from React . But you should start trying Hooks with Function components in your new code.

We can continue to use libraries such as Redux and React Router:

  • React Redux since v7.1.0 supports Hooks API and exposes hooks like ‘useDispatch’ or ‘useSelector’.
  • React Router supports hooks since v5.1.

Other libraries might support hooks in the future too.

You can read the frequently asked questions about Hooks here: Hooks FAQ

____________________

Reference:

https://reactjs.org/docs/hooks-rules.html

--

--

--

Web Application & Blockchain Developer | Cat Lover | INTJ-A

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Akaid Temel Seviye Dersleri

Implementing a scrollbar for React Flow

Simple to use dynamic form-generator powered by Blazor

Login and signup in Angular 11

Vim basic commends

How to create a Component in Angular CLI for a specific Module?

Building a Cryptocurrency App with Vue.js and CryptoCompare API

Angular 4 — Modules, components and routing

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
M. Kannika

M. Kannika

Web Application & Blockchain Developer | Cat Lover | INTJ-A

More from Medium

Coding with React JS

How To Make a Custom Responsivity Hook in React?

Using the State Hook in React: useState() Hook

Node.js vs React.js: Which is best for your js Project?