2

React Hooks
Black Friday Sale @Courses React Course React Tutorial React Exercise React Basic Concepts Rea
Last Updated : 17 Oct, 2024

React Hooks are used to hook into the features like state and lifecycle
methods of React Component. Generally, Hooks are special functions
that provide access to state in the React Application.

Hooks were introduced in the 16.8 version of React. Hooks give access
to states for functional components while creating a React application. It
allows you to use state and other React features without writing a class.

Table of Content
What are React Hooks?
When to use React Hooks
Types of React Hooks
Benefits of using Hooks
Why the need for ReactJs Hooks?
Rules for using Hooks
Using Hooks in React
Difference Between Hooks and Class Components
Important things to remember while using hooks

What are React Hooks?

Hooks in React allow the functional components to use states and
manage side effects. They were first introduced in React 16.8, and let
developers to hook into the state and other React features without
having to write a class. They provide a cleaner and more concise way
to handle state and side effects in React applications.

Although Hooks generally replace class components, no plans exist to

remove classes from React.

Note: Hooks cannot be used with class components

When to use React Hooks?
If you’ve created a functional component in React and later need to add
state or other React features that were previously only available in class
components, you no longer have to convert it into a class component.
With React Hooks, you can add state and other features directly to a
functional component. Hooks like useState and useEffect enable you to
manage state, side effects, and other logic within your existing
functional components, making your code more concise and avoiding
the need to rewrite components as classes. React hooks have
transformed the way we manage state and side effects in functional
components. The ReactJS Course offers comprehensive lessons on all
the hooks, providing you with the tools you need to build modern React
applications effectively.

Types of React Hooks

The Built-in React Hooks are:

State Hooks
Context Hooks
Ref Hooks
Effect Hooks
Performance Hooks
Resource Hooks
Other Hooks

1. React State Hooks

State Hooks stores and provide access to the information. To add state
in Components we use:

useState Hook: useState Hooks provides state variable with direct

update access.
useReducer Hook: useReducer Hook provides a state variable along
with the update logic in reducer function.
 const [count, setCount] = useState(0)

2. React Context Hooks

Context hooks make it possible to access the information without being

passed as a prop.

useContext Hooks: shares the data as a global data with passing

down props in component tree.

const context = useContext(myContext);

3. React Ref Hooks

Refs creates the variable containing the information not used for
rendering e.g. DOM nodes.

useRef: Declares a reference to the DOM elements mostly a DOM

Node.
useImperativeHandle: It is an additional hook that declares a
customizable reference

const textRef = useRef(null);

4. Effect Hooks:

Effects connect the components and make it sync with the system. It
includes changes in browser DOM, networks and other libraries.

useEffect: useEffect Hook connects the components to external

system
useLayoutEffect: used to measure the layout, fires when the screen
rerenders.
useInsertionEffect: used to insert the CSS dynamically, fires before
the changes made to DOM.
 useEffect(()->{
// Code to be executed
}, [dependencies] )

5. React Performance Hooks:

Performace hooks are a way to skip the unnecessary work and optimise
the rendering preformance.

useMemo: return a memoized value reducing unnecessary

computations.
useCallback: returns a memoized callback that changes if the
dependencies are changed.

const memoizedValue = useMemo(functionThatReturnsValue,

arrayDependencies)

To prioritize rendering we can use these:

useTransition: enables us to specify which state changes are critical

or urgent and which are not.
useDefferedValue: allows you to postpone the rendering of a
component until a specific condition is met.

6. React Resource Hooks:

It allows component to access the resource without being a part of their

state e.g., accessing a styling or reading a promise.

use: used to read the value of resources e.g., context and promises.

const data = use(dataPromise);

7. Additional React Hooks:

These are rarely used hooks mostly used in libraries.

 useDebugValue: helps developers debug custom hooks in React
Developer Tools by adding additional information and labels to those
hooks.
useID: generates unique IDs i.e, returns a string that is stable across
both the server and the client sides.
useSyncExternalStore: helps components subscribe to external
stores.

Apart from these Built-in React hooks we can also create Custom
Hooks in React.

You can see a Complete list of React Hooks in ReactJS Hooks Complete
Reference.

Benefits of using Hooks

Hooks can improve code reusability and make it easier to split complex
components into smaller functions.

Simpler, cleaner code: Functional components with hooks are often

more concise and easier to understand than class components.
Better for complex UIs: Hooks make it easier to manage state and
side effects in components with intricate logic.
Improved maintainability: Code using hooks is often easier to test
and debug.

Why the need for ReactJs Hooks?

There are multiple reasons responsible for the introduction of the Hooks
which may vary depending upon the experience of developers in
developing React application. Needs for react hooks are:

Use of ‘this’ keyword

Reusable stateful logics
Simplifying complex scenarios

1. Use of ‘this’ keyword

Working with classes in React involves understanding JavaScript’s

‘this’ keyword intricacies, causing challenges uncommon in other
 languages.
Implementing class components requires binding event handlers,
adding complexity compared to the simplicity of props and state
React developers note that classes lack efficiency and may hinder hot
reloading reliability, a concern Hooks address effectively

2. Reusable stateful logics:

Addressing higher-level concepts like Higher-order components

(HOC) and render props, reusing stateful logic is challenging.
Solutions like HOC and render props can lead to an inefficient code
base, complicating readability with nested components.
Hooks offer a cleaner way to share stateful logic without altering
component hierarchy, enhancing code organization and clarity.

3. Simplifying complex scenarios:

In complex scenarios, life-cycle methods may scatter code, making it

challenging to organize related logic in one place.
Hooks address this issue by allowing the organization of code based
on related functionality rather than life-cycle methods.

Rules for using Hooks

Only functional components can use hooks
Hooks must be imported from React
Calling of hooks should always be done at top level of components
Hooks should not be inside conditional statements

Using Hooks in React

This example demonstrate the use of react useState hook in the
application.

JavaScript

1 // Filename - index.js
2
3 import React, { useState } from "react";
 import ReactDOM from "react-dom/client";
5 function App() {
6 const [click, setClick] = useState(0);
7
8 // Using array destructuring here
9 // to assign initial value 0
10 // to click and a reference to the function
11 // that updates click to setClick
12 return (
13 <div>
14 <p>You clicked {click} times</p>
15 <button onClick={() => setClick(click +
1)}>
16 Click me
17 </button>
18 </div>
19 );
20 }
21
22 const root = ReactDOM.createRoot(
23 document.getElementById("root")
24 );
25 root.render(
26 <React.StrictMode>
27 <App />
28 </React.StrictMode>
29 );

Output:

We have used useState hook which lets functional components have

access to states with the help of which we are able to manipulate states

Difference Between Hooks and Class Components

 Feature Class Components React Hooks

State this.state and

useState and useEffect
Management lifecycle methods

Spread across
Code Structure methods, can be Smaller, focused functions
complex

Easy to create and reuse

Reusability Difficult to reuse logic
custom hooks

Familiar to OOP Requires different mindset

Learning Curve
developers than classes

Error
Supported Not currently supported
Boundaries

Third-party Some libraries rely on May not all be compatible

Libraries them yet

Important things to remember while using hooks

Hooks are optional in React 16.8+, allowing partial or full project
adoption without rewriting existing code.
Hooks are backward-compatible, ensuring smooth integration with
existing components and preventing breaking changes.
React has no plans to eliminate classes; Hooks and class components
can coexist.
React projects can seamlessly blend class-based and functional
components with Hooks.
Hooks provide a direct API for key React concepts, such as props,
state, context, refs, and lifecycle.

Want to be a Software Developer or a Working Professional looking to

enhance your Software Development Skills? Then, master the concepts
of Full-Stack Development. Our Full Stack Development - React and
Node.js Course will help you achieve this quickly. Learn everything from
Front-End to Back-End Development with hands-on Projects and real-
world examples. This course enables you to build scalable, efficient,
dynamic web applications that stand out. Ready to become an expert in
Full-Stack? Enroll Now and Start Creating the Future!

R Raju… 36

Previous Article Next Article

Implementing State in React React useState Hook
Components

React Hooks

Similar Reads
When is it best to use custom hooks instead of built-in React hooks?
Custom hooks in React are useful when you want to extract and reuse
stateful logic across multiple components. While built-in React hooks lik…
 2 min read

Why to use React Hooks Instead of Classes in React JS ?

The introduction of React Hooks has changed the way we are managing
states and lifecycle features. They offer more easy and functional way as…
4 min read

What are React Hooks, and why were they added to React?
React Hooks are a way to add functionality to functional components in
React. Before Hooks, functional components were more limited compare…
2 min read

What are the React Router hooks in React v5?

React Router hooks perform client-side single-page routing that provides
a functional and streamlined approach to managing navigation in React…
5 min read

Explain the new feature of React hooks introduced in React v16.8

React v16.8 is no less than a miracle for all the React developers because
this version of React introduced hooks to all of us. Before its release, the…
7 min read

How to set an object key inside a state object in React Hooks?

We can update a React hooks state object that has a nested object
containing objects with index keys with the following approach, Before…
2 min read

How to use componentWillMount() in React Hooks?

The componentWillMount() method allows us to execute the React code
synchronously when the component gets loaded or mounted in the DOM…
2 min read

React Suite Notification Props & Hooks

React Suite is a popular front-end library with a set of React components
that are designed for the middle platform and back-end products.…
4 min read
 Things You Should Know About React Hooks
React...We all know the importance of this library in the tech industry.
Most of the applications are switching to React because of its advantage…
4 min read

How to build a Tic-Tac-Toe Game using React Hooks ?

To build a Tic-Tac-Toe using react Hooks include the interactive
components that represent the board, the signs, and at last the winner o…
8 min read

Article Tags : JavaScript ReactJS Web Technologies React-Hooks

Corporate & Communications Address:-

A-143, 9th Floor, Sovereign Corporate
Tower, Sector- 136, Noida, Uttar Pradesh
(201305) | Registered Address:- K 061,
Tower K, Gulshan Vivante Apartment,
Sector 137, Noida, Gautam Buddh
Nagar, Uttar Pradesh, 201305
 Company Explore
About Us Job-A-Thon Hiring Challenge
Legal Hack-A-Thon
Careers GfG Weekly Contest
In Media Offline Classes (Delhi/NCR)
Contact Us DSA in JAVA/C++
Advertise with us Master System Design
GFG Corporate Solution Master CP
Placement Training Program GeeksforGeeks Videos
Geeks Community

Languages DSA
Python Data Structures
Java Algorithms
C++ DSA for Beginners
PHP Basic DSA Problems
GoLang DSA Roadmap
SQL DSA Interview Questions
R Language Competitive Programming
Android Tutorial

Data Science & ML Web Technologies

Data Science With Python HTML
Data Science For Beginner CSS
Machine Learning JavaScript
ML Maths TypeScript
Data Visualisation ReactJS
Pandas NextJS
NumPy NodeJs
NLP Bootstrap
Deep Learning Tailwind CSS

Python Tutorial Computer Science

Python Programming Examples GATE CS Notes
Django Tutorial Operating Systems
Python Projects Computer Network
Python Tkinter Database Management System
Web Scraping Software Engineering
OpenCV Tutorial Digital Logic Design
Python Interview Question Engineering Maths

DevOps System Design

Git High Level Design
AWS Low Level Design
Docker UML Diagrams
Kubernetes Interview Guide
Azure Design Patterns
GCP OOAD
DevOps Roadmap System Design Bootcamp
 Interview Questions

School Subjects Commerce

Mathematics Accountancy
Physics Business Studies
Chemistry Economics
Biology Management
Social Science HR Management
English Grammar Finance
Income Tax

Databases Preparation Corner

SQL Company-Wise Recruitment Process
MYSQL Resume Templates
PostgreSQL Aptitude Preparation
PL/SQL Puzzles
MongoDB Company-Wise Preparation
Companies
Colleges

Competitive Exams More Tutorials

JEE Advanced Software Development
UGC NET Software Testing
UPSC Product Management
SSC CGL Project Management
SBI PO Linux
SBI Clerk Excel
IBPS PO All Cheat Sheets
IBPS Clerk Recent Articles

Free Online Tools Write & Earn

Typing Test Write an Article
Image Editor Improve an Article
Code Formatters Pick Topics to Write
Code Converters Share your Experiences
Currency Converter Internships
Random Number Generator
Random Password Generator

DSA/Placements Development/Testing
DSA - Self Paced Course JavaScript Full Course
DSA in JavaScript - Self Paced Course React JS Course
DSA in Python - Self Paced React Native Course
C Programming Course Online - Learn C with Data Structures Django Web Development Course
Complete Interview Preparation Complete Bootstrap Course
Master Competitive Programming Full Stack Development - [LIVE]
Core CS Subject for Interview Preparation JAVA Backend Development - [LIVE]
Mastering System Design: LLD to HLD Complete Software Testing Course [LIVE]
Tech Interview 101 - From DSA to System Design [LIVE] Android Mastery with Kotlin [LIVE]
 DSA to Development [HYBRID]
Placement Preparation Crash Course [LIVE]

Machine Learning/Data Science Programming Languages

Complete Machine Learning & Data Science Program - [LIVE] C Programming with Data Structures
Data Analytics Training using Excel, SQL, Python & PowerBI - C++ Programming Course
[LIVE] Java Programming Course
Data Science Training Program - [LIVE] Python Full Course
Mastering Generative AI and ChatGPT

Clouds/Devops GATE
DevOps Engineering GATE CS & IT Test Series - 2025
AWS Solutions Architect Certification GATE DA Test Series 2025
Salesforce Certified Administrator Course GATE CS & IT Course - 2025
GATE DA Course 2025

@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved