Hooks with React from scratch

What are hooks and how to use them to react?

What are the Hooks:
Hooks are the react features that let you “hook into” react app, they are the part of React, it means react provides the hooks. We all know that in react we can’t use state and react lifecycle methods in function component. Hooks are available in/after React 16.8, it basically provides the mechanism to use state and kind of lifecycle methods in our function component. Hooks allow us to use React without making classes that mean we can use most of the react features without writing a class.

When to use hooks:
In the React app, If we write a component as a function component, and some point of time it requires the state in this component, previously, we need to convert the function component to the class component. But, now we can achieve it by using a Hook in this function component.

Some built-in hooks are:
* useState
* useEffect
* useContext
* useLayoutEffect
* useDebugValue
* useReducer
* useCallback
* useMemo
* useImperativeHandle
etc

How to use Hooks:
If you are using in your function component, then you should ensure that you are following the rules which are required while using it. Below are the rules of using hooks:

1. Call hooks only on top-level:
We shouldn’t call hook inside the loops, conditions, or nested functions. Always ensure that you are using the hook at the top level of your functions.

2. Call hooks from React functions:
Call hooks from react function component, or we should call hooks from our custom hooks. We shouldn’t call hooks from a regular javascript function.

3. Order of hooks:
Ensure the order of hooks, because react relies on the order in which hooks are called.

4. Do not use hooks in the classes:
Hooks don’t work inside the classes.

Let’s use “useState” hook in our react app from scratch:

What is useState hook?
“useState” is a function that allows you to use state in your function component. If you want to use state in your component then you need to import the useState from react and use it. Render will preserve this state between re-renders.

It takes one argument as the default value of that state and returns two things:
1. The current state with the given value.
2. A function, which is used to update the state value.

Step 1: Create an app “hooks-demo” using below command:

npx create-react-app hooks-demo

after successful completion of above command run command

cd hooks-demo
npm start

Step 2: Make your app is working:
Open the browser and hit URL http://localhost:3000 and should be displayed the below screen as:

snapshot of URL http://localhost:3000

Step 3: Declaring state in function component using useState hook:
Now open the code in any editor, and remove all the code from src/App.js and write the below code in the App.js:

import React, { useState } from 'react';
import './App.css';
function App() {
  
  const [ name, setName ] = useState('Shubham');
 
  const changeName = () => {
   setName('Ankit')
  }
  return (
   <div>
   <h1>{name}</h1>
   <button type='button' onClick={changeName}>Chnage Name</button>
   </div>
  );
}
export default App;

Let’s understand the code first:
we are importing “React” and “useState” in the below line:

import React, { useState } from 'react';

Creating a function component App:

function App() { }

Creating a state using “useState” hook with default value ‘Shubham’:

const [ name, setName ] = useState('Shubham');

Created a click handler for the button to change the state:

const changeName = () => {
   setName('Ankit')
}

Return HTML to render on the web browser:

return (
   <div>
   <h1>{name}</h1>
   <button type='button' onClick={changeName}>Chnage Name</button>
   </div>
);

Export the app:

export default App;

Step 4: Run the app and see the browser:
Run this app using command “npm start” and open the browser with URL “http://localhost:3000”, It should be displayed like this ( App component ):

Snapshot of localhost:3000

In the browser, you can see we are using state ( name ) in function component using the “useState” hook.
Now click on “Change Name”.

Snapshot of changing state after button click

you can see, the name has changed, it means we are changing the state on button click.
Now, this is an example of the “useState” hook. Now you can alter the code and understand more about the behavior.

Explore more:

You can use multiple useState in your app component:
In the App.js I have added one more “useState” with value “Verma” as lastName and added one more method to change the lastName is “changeLastName”.
You can simply write code for another useState or Copy the below code in your App.js and see the result in your browser:

import React, { useState } from 'react';
import './App.css';
function App() {
  const [name, setName] = useState('Shubham');
  const [lastName, setLastName] = useState('Verma');
  
  const changeName = () => {
     setName('Ankit')
   }
  const changeLastName = () => {
     setLastName('Chaudhary') 
  }
  return (
     <div>
     <h1>{name + ' ' + lastName}</h1>
     <button type='button' onClick={changeName}>Change Name</button>
     <button type='button' onClick={changeLastName}>Change Last Name</button>
     </div>
  ); 
}
export default App;

Open in the browser:

Snapshot of localhost:3000

After clicking the Change Name:

Snapshot of localhost:3000

After clicking the Change Last Name:

Snapshot of localhost:3000

Now you know, how to use hook ( useState ) in the react app.

Conclusion:

In this article, you learned the following things:
* What are the Hooks?
* When to use hooks?
* Some built-in hooks.
* How to use Hooks?
* Rules to using hooks.
* useState hook.
* Implementation of useState hook in react app.
* Use multiple useState in your app component.

Thanks for reading.

If you have any questions or suggestion please write in the comment, or If you’re interested in Node.js or JavaScript, then this link will help.