When I first started learning React, I remember one thing clearly the word “Hooks” confused me a lot. Many tutorials were talking about Hooks like useState, useEffect, custom hooks etc. but honestly it felt a little complicated in the beginning.
If you are also a beginner React developer or a B.Tech student learning web development don’t worry. Almost every student feels the same at first.
In simple words, React Hooks help us use state and other React features in functional components. Earlier we had to use class components but now Hooks make coding much simpler and cleaner.
In this blog, I will explain React Hooks basics in a very simple way like how one B.Tech student explains to another during lab work or while preparing for a project.
So let’s start step by step.
Introduction to React Hooks
Before React version 16.8 developers mostly used class components to manage state and lifecycle methods. Functional components were mainly used for simple UI rendering.
But many developers felt that class components were sometimes confusing and had too much boilerplate code.
So React introduced Hooks.
What are React Hooks?
In simple words:
- React Hooks are special functions that allow us to use React features like state and lifecycle methods inside functional components.
So now we can write cleaner code using functions instead of classes.
Why React Hooks are useful
Hooks make development easier in many ways:
- Less code compared to class components
- Easier to understand and maintain
- Better code reuse
- Logic can be separated using custom hooks
When I started building small projects like a to do list or simple counter. I realized Hooks make React much easier.
useState Hook
One of the most commonly used Hooks in React is useState.
What is useState?
useState is used to create and manage state inside functional components.
State simply means data that can change over time.
For example:
- Counter value
- Form input value
- Login status
- List of items
In simple words, useState helps React remember values.
Syntax of useState
const [state, setState] = useState(initialValue);
Here:
- state → current value
- setState → function used to update the value
- initialValue → starting value
Many students get confused here because of the square brackets but it’s just JavaScript array destructuring.
Example: Counter Application
Let’s take a simple example. Imagine we are making a counter app something many students build while practicing React.
import React, { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h2>Counter Value: {count}</h2>
<button onClick={() => setCount(count + 1)}>Increase</button>
</div>
);
}
export default Counter;How this works
- count stores the value
- setCount() updates the value
- When button is clicked → count increases
When I first built this example during my practice it felt really satisfying because state started making sense.
Real Life Example
Think of attendance in a class.
Every time the teacher marks attendance the count increases.
- Attendance number = state
- Updating attendance = setState
That’s basically how useState works.
useEffect Hook
Another very important hook is useEffect.
Many students get confused about this hook initially but actually it's not that complicated.
What is useEffect?
useEffect is used to perform side effects in React components.
Side effects mean things like:
- Fetching data from API
- Updating the DOM
- Setting timers
- Logging information
In simple way useEffect runs code when the component loads or updates.
Syntax of useEffect
useEffect(() => {
// code to run
}, []);
The empty array [] is called dependency array.
It tells React when the effect should run.
Example: Data Fetching
import React, { useEffect, useState } from "react";
function Users() {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users")
.then(response => response.json())
.then(data => setUsers(data));
}, []);
return (
<div>
<h2>User List</h2>
{users.map(user => (
<p key={user.id}>{user.name}</p>
))}
</div>
);
}
export default Users;
How this works
- Component loads
- useEffect runs
- API data is fetched
- Users are displayed
When I used this in my practice project. I realized how powerful React Hooks are.
When does useEffect run?
| Dependency Array | When Effect Runs |
|---|---|
| No array | Runs on every render |
| Empty array [] | Runs once when component loads |
| With values [count] | Runs when that value changes |
Many students get confused here during interviews so remember this concept clearly.
Custom Hooks
Now let’s talk about something interesting Custom Hooks.
This is where React becomes really powerful.
What are Custom Hooks?
Custom Hooks are user-defined hooks that allow us to reuse logic across multiple components.
Basically, if we write the same logic again and again we can move it into a custom hook.
React recommends that custom hook names should start with “use”.
- useFetch
- useAuth
- useForm
Example: Custom Hook for Fetching Data
import { useState, useEffect } from "react";
function useFetch(url) {
const [data, setData] = useState([]);
useEffect(() => {
fetch(url)
.then(res => res.json())
.then(result => setData(result));
}, [url]);
return data;
}
export default useFetch;
Now we can use this hook anywhere.
const users = useFetch("https://jsonplaceholder.typicode.com/users");
When I learned custom hooks during project work it made my code cleaner and reusable.
Practical Examples of React Hooks
Form Input Handling
Many assignments require form handling.
function FormExample() {
const [name, setName] = useState("");
return(
<div>
<input
type="text"
value={name}
onChange={(e)=> setName(e.target.value)}
/>
<p>Hello {name}</p>
</div>
)
}
- Login forms
- Registration forms
- Search bars
Timer Example
useEffect(() => {
const timer = setInterval(() => {
console.log("Running...");
}, 1000);
return () => clearInterval(timer);
}, []);
This runs every second.
Toggle Example
const [show, setShow] = useState(false);
<button onClick={()=> setShow(!show)}> Toggle</button>
- dropdown menus
- modals
- UI components
Comparison: Class Components vs Hooks
| Feature | Class Components | Hooks |
|---|---|---|
| Code Length | More code | Less code |
| Readability | Sometimes complex | Easier |
| State Handling | this.state | useState |
| Lifecycle Methods | componentDidMount etc | useEffect |
| Reusability | Hard | Easy using custom hooks |
In my opinion, Hooks make React development much simpler especially for beginners.
Common Mistakes Beginners Make
While learning React Hooks, many students make small mistakes.
Here are some common ones:
- Calling hooks inside loops or conditions
- Forgetting dependency array in useEffect
- Updating state incorrectly
- Using hooks outside components
A good rule is:
- Hooks should always be called at the top level of a component.
Personal Learning Experience
When I first learned React Hooks, I was working on a small React practice project. At that time I used useState for handling form inputs and useEffect for fetching API data.
Initially I used to get confused about dependency arrays in useEffect but after building a few mini projects everything started making sense.
My suggestion to beginners is simple:
- Build small projects
- Practice regularly
- Don’t just read tutorials
Because React is something you learn by doing not just by reading.
Conclusion
React Hooks have completely changed the way developers write React applications. Instead of complicated class components, we can now write clean and simple functional components.
In this blog we discussed:
- What React Hooks are
- How useState works
- How useEffect works
- What Custom Hooks are
- Some practical examples
For beginners and B.Tech students learning web development understanding Hooks is very important because almost every modern React project uses them.
If you are currently learning React my advice is simple:
- Start with useState
- Then learn useEffect
- Build small projects
- Practice custom hooks
Slowly everything will become clear.
And once you get comfortable with Hooks. React development becomes much more fun.
FAQs about React Hooks
What are React Hooks in simple words?
React Hooks are functions that allow us to use React features like state and lifecycle methods inside functional components.
What is the use of useState hook?
The useState hook is used to create and manage state in functional components.
What does useEffect do?
useEffect is used to perform side effects such as fetching data, updating DOM, or running timers in React components.
What are custom hooks?
Custom hooks are user created hooks that allow developers to reuse logic across multiple components.
Are React Hooks better than class components?
In most cases yes. Hooks make React code simpler, cleaner and easier to maintain compared to class components.
Read Also : React State and Props Explained for Beginners 2026
