Understanding ReactJs useState Hook

ReactJS Hooks were first introduced in the React 16.8 version. They give you access to use state and other React features without the use of class. 

Taken literally, hooks in React are the functions which "hook into" React state and lifecycle features from function components. They do not work inside classes. This implies that when hooks are present, we do need class components. 

And if you are thinking that they might replace classes, you are wrong because classes form an integral part of React and there are no plans of removing them from React.

Example:

All this while you have been adding state to a function component by converting it to a class. With hooks, you can add a state inside a function component without converting it to a class.

Hooks are similar to JavaScript functions, but you need to follow certain rules when using them. 

• Hooks to be called only from React function components

There’s a rule that hooks can only be called from React function components and not from regular JavaScript functions. It is also possible to call hooks from custom Hooks.

• Hooks to be called only at the top level

It is not possible to call Hooks inside loops, nested functions, or conditions. You should always call them at the top level of a React component.

• Hooks cannot be conditional

Calling the Hooks conditionally can change the order of the Hooks being rendered and mess up the entire Hooks system.

A few prerequisites to use React Hooks are:

• Having Node version 6 or above

• Having NPM version 5.2 or above

• Having the Create-react-app tool for running the React App

Run the following command to install Hooks.