REACTJS WITH HOOKS
Definition of Hook:
A Hook is a special function that let you “hook into” React state and lifecycle features from function components. By this, we mean that hooks allow us to easily manipulate the state of our functional component without needed to convert them into class components.
Introduction :
⦁ Hooks are the new feature introduced in REACT 16.8 version.
⦁ Hooks are the Backward-compatible, which means it does not contain any breaking changes.
⦁ Hooks don’t work inside classes, they let you use React without classes. (We don’t recommend rewriting your existing components overnight but you can start using Hooks in the new ones if you’d like)
When we use a Hook?
⦁ If you write a function component and realize you need to add some state to it, previously you had to convert it to a class.
⦁ Now you can use a Hook inside the existing function component.
Rules of Hooks:
Hooks are similar to the javascript concepts, but we need to follow the two rules while we are using the Hooks concepts.
1. Only call Hooks at the top level
Do not call the Hooks inside the loops, conditions or nested functions. Hooks should be always top of the react functions.
2. Only call Hooks from React functions
Do not call Hooks from regular JavaScript functions. Instead, you can call Hooks from React function components. Hooks can also be called from “Custom Hooks”.
We are covering 4 hooks of react
1. useState
2. useEffect
3. useContent
4. useRef
useState:
Below example show the useState hook :
import React, { useState} from ‘react’;
import ‘./App.css’;
export default () =>
{
const [age, setAge] = useState(22);
const [name, setName] = useState(‘Sreenu’)
return (
<div className=”App”>
<header className=”App-header”>
<div>
<p>Name:{“ “}
<input type=”text” value={name} onChange={ e => setName(e.target.value)}></input></p>
<p>Age:{age}</p>
<button onClick={() => setAge(age + 1)}>Increment Age By One</button>
<p>State: age: {age}, name: {name}</p>
</div>
</header>
</div>
);
}
Start by importing the useState from react. useState is used to declare the state variable and can be initialzed with any type of the value.
Below figure shows the Output of the useState

If we click on the Increment Age By One than it will be incremented by +1. The 22 in useState(22) function is the Initial Value of that particular state(i.e., means that we set the age count is 22)
useEffect:
The below example shows the changing webpage title in the realtime.
import React, { useState, useEffect} from ‘react’;
import ‘./App.css’;
export default () =>
{
function Demo2() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}
export default Demo2;
Here we will import the useEffect and also useState from react. useEffect() is used to write function statements and as seen above we are changing title of webpage. useEffect is similar to componentDidMount and componentDidUpdate of ReactLifeCycles.
Below figure shows the output of the useEffect

Whenever we click on the Button, the text title will change with the counts Like… you clicked. We can click for ‘n’ number of times.

useContent:
Let us see the example for useContent
import React, {useContext } from ‘react’;
import ‘./App.css’;
const TestContext = React.createContext();
function Display(){
const value = useContext(TestContext);
return <div>{value},I am learning react hooks.</div>;
}
function App(){
return (
<TestContext.provider value={“Sreenu”}>
<Display/>
</TestContext.provider>
);
}
export default App;
⦁ In the above example we will use the TestContext.provider in our App component and set the value there to “sreenu” which means that any context-reading object in the tree can now read that value.
Below figure shows the output of use context

⦁ To read this value in the Display() function we call usecontext, by passing the TestContext as an argument, then pass the context object which we got from React.createContext, and it automatically outputs the value.
useRef:
Refs provide a way to access the React elements created in the render() method.
import React, { useRef, useState}from ‘react’;
import ‘./App.css’;
function App() {
let [name, setName] = useState(“Sreenu”);
let nameRef = useRef();
const submitButton = () => {
setName(nameRef.current.value);
};
return (
<div className=”App”>
<p>{name}</p>
<div>
<input ref={nameRef} type=”text” />
<button type=”button” onClick={submitButton}>
Submit
</button>
</div>
</div>
);
}
export default App;
In this example we will use the useRef(), useState() to render the value of the input into a <p>tag. The ref is instantiated into the nameRef variable. The nameRef variable can be used in the input field by being set as the ref.
Below figure shows the output of useRef

The submit button in the code has an onClick event handler called the submit button. The submit button function calls setName (created via useState). As we’ve done with useState hooks before, setName will be used to set the state name.

To extract the name from the input tag, we read the value nameRef.current.value.
Another thing to note concerning useRef is the fact that it can be used for more than the ref attribute.
