React JS Hooks Reference
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
/* 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 |
Contact Us