Open In App

React JS Hooks Reference

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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>h2 {
    text-align: center;
}
 
.App>button {
    width: 8rem;
    font-size: larger;
    padding: 2vmax auto;
    height: 1.8rem;
    color: white;
    background-color: rgb(34, 34, 33);
    border-radius: 10px;
}
 
button:hover {
    background-color: rgb(80, 80, 78);
}


Output:

onClickevent2GIF

React JS Hooks Reference:

React Hooks

Description

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



Last Updated : 06 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads