React Hooks: Syntax, Usage, and Examples
React hooks allow you to use state and lifecycle features inside functional components. They simplify logic, improve reusability, and eliminate the need for class components.
What Is a React Hook?
A React hook is a function that lets you manage state, handle side effects, or interact with the React component lifecycle inside functional components. The most common hooks are useState for managing component state and useEffect for handling side effects.
How to Use React Hooks
React hooks must be called at the top level of a functional component and cannot be used inside loops, conditions, or nested functions.
Using useState
The useState hook lets you store and update state inside a functional component.
jsx
import { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increase</button>
</div>
);
}
Using useEffect
The useEffect hook runs code after a component renders. This is useful for side effects like fetching data or setting up event listeners.
jsx
import { useState, useEffect } from "react";
function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setSeconds((prev) => prev + 1);
}, 1000);
return () => clearInterval(interval);
}, []);
return <p>Timer: {seconds}s</p>;
}
Using useContext
The useContext hook gives you access to values from a React context without using the Consumer component.
jsx
import { useContext, createContext } from "react";
const ThemeContext = createContext("light");
function ThemedComponent() {
const theme = useContext(ThemeContext);
return <p>Current theme: {theme}</p>;
}
When to Use React Hooks
Hooks make your code more reusable and maintainable. You should use them when you need to:
Manage Component State
The useState hook allows you to store and update values that change over time.
jsx
function Toggle() {
const [isOn, setIsOn] = useState(false);
return (
<button onClick={() => setIsOn((prev) => !prev)}>
{isOn ? "ON" : "OFF"}
</button>
);
}
Handle Side Effects
The useEffect hook is ideal for tasks like fetching data, managing subscriptions, and interacting with the DOM.
jsx
function FetchData() {
const [data, setData] = useState(null);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then((response) => response.json())
.then((json) => setData(json));
return () => console.log("Cleanup on unmount");
}, []);
return <p>{data ? data.title : "Loading..."}</p>;
}
Reuse Logic Across Components
Custom hooks let you extract and share logic between components.
jsx
function useCounter(initialValue = 0) {
const [count, setCount] = useState(initialValue);
const increment = () => setCount((c) => c + 1);
return { count, increment };
}
function CounterComponent() {
const { count, increment } = useCounter();
return <button onClick={increment}>Count: {count}</button>;
}
Examples of React Hooks
Form Handling with useState
You can use useState to track form input values.
jsx
function SimpleForm() {
const [input, setInput] = useState("");
return (
<div>
<input value={input} onChange={(e) => setInput(e.target.value)} />
<p>You typed: {input}</p>
</div>
);
}
Window Resize with useEffect
This example updates the state whenever the window resizes.
jsx
function WindowSize() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const handleResize = () => setWidth(window.innerWidth);
window.addEventListener("resize", handleResize);
return () => window.removeEventListener("resize", handleResize);
}, []);
return <p>Window width: {width}px</p>;
}
Context API with useContext
This example shows how to provide and consume context using useContext.
jsx
const UserContext = createContext();
function UserProvider({ children }) {
return (
<UserContext.Provider value="Jane Doe">{children}</UserContext.Provider>
);
}
function UserProfile() {
const user = useContext(UserContext);
return <p>Logged in as: {user}</p>;
}
Learn More About React Hooks
Dynamically Call React Hook
You cannot call hooks inside loops or conditions. Instead, conditionally render different components.
jsx
function ConditionalComponent({ show }) {
if (!show) return null;
return <p>Component with a hook</p>;
}
React Hooks with Arguments
Some hooks, like useState, accept arguments. Others, like useEffect, take dependencies.
jsx
function TimerWithDelay({ delay }) {
const [time, setTime] = useState(0);
useEffect(() => {
const interval = setInterval(() => setTime((t) => t + 1), delay);
return () => clearInterval(interval);
}, [delay]);
return <p>Time: {time}s</p>;
}
How to Compare Angular Hooks vs React Hooks
- React hooks simplify logic inside functional components.
- Angular hooks, such as
ngOnInitandngOnDestroy, manage lifecycle behavior. - React’s
useEffecthandles side effects, similar to Angular’s lifecycle methods.
React Hook Forms
The react-hook-form library optimizes form handling by reducing re-renders.
jsx
import { useForm } from "react-hook-form";
function LoginForm() {
const { register, handleSubmit } = useForm();
const onSubmit = (data) => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("username")} placeholder="Username" />
<button type="submit">Submit</button>
</form>
);
}
React Custom Hooks
A custom hook is a function that extracts logic for reuse in multiple components.
jsx
function useLocalStorage(key, initialValue) {
const [storedValue, setStoredValue] = useState(() => {
const item = localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
});
const setValue = (value) => {
localStorage.setItem(key, JSON.stringify(value));
setStoredValue(value);
};
return [storedValue, setValue];
}
React Hook Nested State
You can store objects in useState, but updates must be done immutably.
jsx
function Profile() {
const [user, setUser] = useState({ name: "Alex", age: 25 });
const updateName = () => {
setUser((prev) => ({ ...prev, name: "Jordan" }));
};
return (
<div>
<p>Name: {user.name}</p>
<button onClick={updateName}>Change Name</button>
</div>
);
}
React hooks make functional components more powerful by adding state and lifecycle capabilities. By understanding hooks like useState, useEffect, and useContext, you can build more efficient, reusable, and maintainable React applications.
Looking to dive deeper into React hooks and other essential React concepts? Check out our React course.