React JS Hooks Reference
Last Updated :
06 Dec, 2023
React hooks are functions that enable functional components to use state and lifecycle features that were previously only available in class components.
Example: Below is the basic representation of the React JS Hooks useState.
Javascript
import React, { useState } from 'react' ;
import './App.css'
const App = () => {
const [num, setNum] = useState(0);
const handleClick = () => {
setNum(num + 1);
};
return (
<div className= "App" >
<h2> {num}</h2>
<button onClick={handleClick}>
Add one
</button>
</div>
);
};
export default App;
|
CSS
.App {
display : flex;
flex- direction : column;
justify- content : center ;
align-items: center ;
}
body {
background-color : antiquewhite;
}
.App>h 2 {
text-align : center ;
}
.App>button {
width : 8 rem;
font-size : larger ;
padding : 2 vmax auto ;
height : 1.8 rem;
color : white ;
background-color : rgb ( 34 , 34 , 33 );
border-radius: 10px ;
}
button:hover {
background-color : rgb ( 80 , 80 , 78 );
}
|
Output:
React JS Hooks Reference:
Introduction to React Hooks
|
React hooks are functions that enable functional components to use state and lifecycle features that were previously only available in class components.
|
ReactJS Custom Hooks
|
We know that hooks like useState, useEffect are reusable components. Somtimes we make components that we have to reuse again and again in the application.
|
ReactJS useContext Hook
|
Context provides a way to pass data or state through the component tree without having to pass props down manually through each nested component.
|
ReactJS useEffect Hook
|
React JS useEffect hooks is a predefined hook that handles the effects of the dependency array.
|
ReactJS useReducer Hook
|
The useReducer Hook is the better alternative to the useState hook and is generally more preferred over the useState hook when you have complex state-building logic
|
ReactJS useMemo Hook
|
The useMemo is a hook used in the functional component of react that returns a memoized value.
|
ReactJS useRef Hook
|
The useRef is a hook that allows to directly create a reference to the DOM element in the functional component
|
ReactJS useState Hook
|
useState() hook allows one to declare a state variable inside a function. It should be noted that one use of useState() can only be used to declare one state variable.
|
ReactJS useLayoutEffect Hook
|
The useLayoutEffect hook works in the same phase as componentDidMount and componentDidUpdate methods
|
Share your thoughts in the comments
Please Login to comment...