ReactJs Tutorials
What is Hook in ReactJs?
Hooks are similar to JavaScript functions. Hooks is used to "hook" into React features such as state and lifecycle methods.
Hook use state and other React features without writing a class. Hooks are the functions which "hook into" React state and lifecycle methods from function components. It does not work inside classes.
use of Hooks
If you write a function component, and then you want to add some state to it, previously you do this by converting it to a class. But, now you can do it by using a Hook inside the existing function component.
File name :
Rules:-
File name :
Hooks always called inside React function components.
Hooks always be used at the top level of a component. Don't call Hooks inside loops, conditions, or nested functions.
Hooks cannot be conditional
Hooks State
Hook uses useState() functional component for setting and retrieving state.
useState() Hook allows us to track state in a function component.
To use the useState Hook, we first need to import it into our component.
import { useState } from "react";
File name : App.js
import React, { useState } from 'react';
function CountApp() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
export default CountApp;
Initialize useState() Example:-
initialize our state by calling useState in our function component. useState() accepts an initial state and returns two values:
Initialize state at the top of the function component.
File name :
import { useState } from "react";
function WebColor() {
const [color, setColor] = useState("");
}
The first value, color, is our current state.
The second value, setColor, is the function that is used to update our state.
Read State :-
File name :
import { useState } from "react";
import ReactDOM from "react-dom";
function FavoriteColor() {
const [color, setColor] = useState("green");
return <h1>My favorite color is {color}!</h1>
}
ReactDOM.render(<FavoriteColor />, document.getElementById('root'));
without hook
File name : App.js
import React, { useState } from 'react';
class CountApp extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
render() {
return (
<div>
<p><b>You clicked {this.state.count} times</b></p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}
export default CountApp;
Update State :-
To update our state, we use our state updater function.
File name :
import { useState } from "react";
import ReactDOM from "react-dom";
function FavoriteColor() {
const [color, setColor] = useState("red");
return (
<>
<h1>My favorite color is {color}!</h1>
<button
type="button"
onClick={() => setColor("blue")}
>Blue</button>
</>
)
}
ReactDOM.render(<FavoriteColor />, document.getElementById('root'));
The useState Hook can be used to keep track of strings, numbers, booleans, arrays, objects,
File name :
Multiple State Hook
File name :
import { useState } from "react";
import ReactDOM from "react-dom";
function Car() {
const [brand, setBrand] = useState("ITTutorial");
const [model, setModel] = useState("Best");
const [year, setYear] = useState("2016");
const [color, setColor] = useState("green");
return (
<>
<h1>My {brand}</h1>
<p>
It is a {color} {model} from {year}.
</p>
</>
)
}
ReactDOM.render(<Car />, document.getElementById('root'));
Hook holds an object:
File name :
import { useState } from "react";
import ReactDOM from "react-dom";
function Car() {
const [car, setCar] = useState({
brand: "Ittutorial",
model: "itechxpert",
year: "2016",
color: "green"
});
return (
<>
<h1>My {car.brand}</h1>
<p>
It is a {car.color} {car.model} from {car.year}.
</p>
</>
)
}
ReactDOM.render(<Car />, document.getElementById('root'));
Updating Objects and Arrays in State
When state is updated, the entire state gets overwritten. What if we only want to update the color of our car? If we only called setCar({color: "blue"}), this would remove the brand, model, and year from our state.
File name :
import { useState } from "react";
import ReactDOM from "react-dom";
function Car() {
const [car, setCar] = useState({
brand: "Ford",
model: "Mustang",
year: "1964",
color: "red"
});
const updateColor = () => {
setCar(previousState => {
return { ...previousState, color: "blue" }
});
}
return (
<>
<h1>My {car.brand}</h1>
<p>
It is a {car.color} {car.model} from {car.year}.
</p>
<button
type="button"
onClick={updateColor}
>Blue</button>
</>
)
}
ReactDOM.render(<Car />, document.getElementById('root'));