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.
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;
|
/* Write CSS Here */ .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:
React Hooks |
Description |
---|---|
React hooks are functions that enable functional components to use state and lifecycle features that were previously only available in class components. |
|
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. |
|
Context provides a way to pass data or state through the component tree without having to pass props down manually through each nested component. |
|
React JS useEffect hooks is a predefined hook that handles the effects of the dependency array. |
|
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 |
|
The useMemo is a hook used in the functional component of react that returns a memoized value. |
|
The useRef is a hook that allows to directly create a reference to the DOM element in the functional component |
|
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. |
|
The useLayoutEffect hook works in the same phase as componentDidMount and componentDidUpdate methods |