React Hooks

React Hooks

React Hooks allows you to use state and other React features without writing a class.

It doesn’t work inside classes.Its work inside the function only.

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.

2.Only call Hooks from React Function

You cannot call Hooks from regular Javascript functions.Instead, you can call Hooks from React function components.Hooks can also be called from custom Hooks.

 

React Hooks State

React state not work in functional component.If we use functional component you must need to use Hooks.

*     Hook state is new way of declaring a state in React app.

*     Hook uses useState() functional component for setting and retrieving state.

*     useState is the Hook which needs to call inside a function component to add some local state to it.

*     The useState returns a pair where the first element is the current state value/initial value,and the second one is a function which allows us to update it.

*     After that ,we will call this function from an event Handler (or) Somewhere else.

*     The useState is similar to this.setState in class.

Program

Index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import './myfile.scss';

import App from './App';

import reportWebVitals from './reportWebVitals';

import styles from './demo.module.css';

import {useState} from 'react';

 

const root = ReactDOM.createRoot(

  document.getElementById('root')

);

function ReactHooks(){

const [count,updatecount]=useState(0);

return(

  <div>

    <p>You Clicked the above button {count} times</p>

    <button onClick={()=>updatecount(count+1)}>Click Me</button>

  </div>

);

}

 

var mystyle={color:'green',textAlign:'center'}

const element =<ReactHooks/>

 root.render(element);

 

 

 

Output

React Hooks Effect

*     The effect Hook allows us to perform side effects(an action) in the function components.

*     It does not use components lifecycle methods which are available in class components.

*     Effects Hooks are equivalent to

componentDidMount(),

componentDidUpdate() and

componentWillUnmount() lifecycle methods

 

This is only used in class component.If you use in functional component use React Hooks Effect.It gives alert after output.

Program

Index.js

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import './myfile.scss';

import App from './App';

import reportWebVitals from './reportWebVitals';

import styles from './demo.module.css';

import {useState,useEffect} from 'react';

 

const root = ReactDOM.createRoot(

  document.getElementById('root')

);

function ReactHooks(){

const [count,updatecount]=useState(0);

useEffect(()=>{

  alert("Hello World");

})

return(

  <div>

    <p>You Clicked the above button {count} times</p>

    <button onClick={()=>updatecount(count+1)}>Click Me</button>

  </div>

);

}

 

var mystyle={color:'green',textAlign:'center'}

const element =<ReactHooks/>

 root.render(element);

 

 

Output