React Hooks in depth

Samrat Ghosh
Dec 31, 2019 · 2 min read

Note: This is the first article in a series of articles where we will cover React Hooks in Depth and try to understand their usage.

React Hooks
React Hooks
React + Hooks

React Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. It is a fundamental shift on how you’ll approach writing React.

Hooks do not have any breaking changes and are 100 % backward compatible. If you are a newbie learning react or seasoned pro try this!

But what is a Hook?

Hooks are functions that let you “hook into” React state and life-cycle features from function components. Hooks don’t work inside classes — they let you use React without classes. You can definitely mix classes and function components with Hooks in a single tree.

At React Conference 2018, Sophie Alpert and Dan Abramov introduced Hooks, you can watch the video introduction below:

React Conference 2018

React core team recommends Hooks in new components you write. In the longer term, they expect Hooks to be the primary way people write React components. So, use hooks in functional components of your new project and new components of your existing project.


The Problems Hooks Solve

Note: Hooks solve More problems, but for now we will focus on the below-mentioned ones -

  1. Functional Components can use State like class based components

Rules of React Hooks

There are two rules that you need to follow while using React Hooks:

  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. 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.

For more details on the rules check — https://reactjs.org/docs/hooks-rules.html#explanation

React core team has provided us with a lint rule that helps us use the hooks properly (enforce the above-mentioned rules). You can also add the same in your ESLint configuration.

Add the ESLint rule by doing npm install -D eslint-plugin-react-hooks and add this to ESLint configuration:

{
"rules": {
…,
"react-hooks/rules-of-hooks": "error"
},
"plugins": [
…,
"react-hooks"
],
}

In the upcoming stories, we will cover the below-mentioned hooks in order:

  1. useState

Note: I will update the links of the stories once they are available on Medium.

JavaScript in Plain English

Learn the web's most important programming language.

Samrat Ghosh

Written by

Front-end Engineer @ Deloitte. You can ask me about - HTML 5, CSS 3, JS, React, Angular 2+, Bootstrap 4, Git, heroku, bitbucket!

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade