-
- Joined
- Mar 22, 2026
-
- Messages
- 277
-
- Reaction score
- 0
-
- Points
- 0
React Hooks revolutionized functional components by bringing state and lifecycle features previously exclusive to class components. Among the most fundamental and frequently used hooks are
The
Basic Usage:
1. The current state value.
2. A function to update that state value.
Key Points for
This ensures you're working with the most up-to-date state value, especially in asynchronous scenarios.
Conceptually,
Basic Usage:
Controlling
The second argument to
1. No dependency array (runs after every render):
Use this when your effect needs to re-run whenever *anything* in the component updates.
2. Empty dependency array
This is ideal for setting up subscriptions, event listeners, or fetching data that only needs to happen once. The
3. Dependency array with values
This is the most common use case. The effect will re-run if any value in the dependency array has changed since the last render. If you use variables from your component's scope inside
Cleanup Function:
Many side effects, like subscriptions or timers, require cleanup to prevent memory leaks or unwanted behavior.
Best Practices & Common Pitfalls:
By mastering
useState and useEffect. Understanding these two is crucial for building robust and efficient React applications.useState: Managing Component StateThe
useState hook allows functional components to manage local state. Before hooks, state management was only possible in class components using this.state and this.setState(). useState simplifies this significantly.Basic Usage:
useState returns an array with two elements:1. The current state value.
2. A function to update that state value.
JSX:
import React, { useState } from 'react';
function Counter() {
// Declare a new state variable, which we'll call "count"
// and a function to update it, "setCount".
// The initial state is 0.
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
<button onClick={() => setCount(0)}>
Reset
</button>
</div>
);
}Key Points for
useState:- Initial State: The argument passed to
useStateis the initial state. It can be any valid JavaScript value (number, string, boolean, object, array). - Functional Updates: For complex state updates that depend on the previous state, it's best practice to pass a function to the setter:
Code:
jsx
setCount(prevCount => prevCount + 1);- Multiple State Variables: You can use
useStatemultiple times in a single component to manage different pieces of state independently.
Code:
jsx
const [name, setName] = useState('');
const [age, setAge] = useState(0);useEffect: Handling Side EffectsuseEffect is your go-to hook for performing "side effects" in functional components. Side effects are operations that interact with the outside world or have an impact beyond the component's render, such as:- Data fetching from an API.
- DOM manipulation (e.g., setting document title).
- Setting up subscriptions or event listeners.
- Timers (e.g.,
setTimeout,setInterval).
Conceptually,
useEffect combines the functionality of componentDidMount, componentDidUpdate, and componentWillUnmount from class components.Basic Usage:
useEffect takes a function as its first argument, which contains the side effect logic.
JSX:
import React, { useState, useEffect } from 'react';
function DocumentTitleUpdater() {
const [count, setCount] = useState(0);
// This effect runs after every render
useEffect(() => {
// Update the document title using the browser API
document.title = `You clicked ${count} times`;
}); // No dependency array means it runs after every render
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}Controlling
useEffect Execution with the Dependency Array:The second argument to
useEffect is an optional dependency array. This array controls when the effect function re-runs.1. No dependency array (runs after every render):
Code:
jsx
useEffect(() => {
// Runs after every render, including the first one.
});2. Empty dependency array
[] (runs once on mount, cleans up on unmount):
Code:
jsx
useEffect(() => {
// Runs only once after the initial render (like componentDidMount).
console.log('Component mounted!');
return () => {
// This cleanup function runs when the component unmounts (like componentWillUnmount).
console.log('Component unmounted!');
};
}, []);return statement inside useEffect is for cleanup.3. Dependency array with values
[dep1, dep2] (runs when dependencies change):
Code:
jsx
useEffect(() => {
// Runs after the initial render AND whenever 'count' or 'name' changes.
console.log(`Count or name changed: ${count}, ${name}`);
}, [count, name]); // Effect re-runs if count or name changesuseEffect, they should generally be included in the dependency array.Cleanup Function:
Many side effects, like subscriptions or timers, require cleanup to prevent memory leaks or unwanted behavior.
useEffect allows you to return a cleanup function. This function runs:- Before the effect re-runs (if dependencies change).
- When the component unmounts.
JSX:
import React, { useState, useEffect } from 'react';
function Timer() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setSeconds(prevSeconds => prevSeconds + 1);
}, 1000);
// Cleanup function: Clear the interval when the component unmounts
// or when the effect re-runs (if dependencies change, though none here).
return () => clearInterval(interval);
}, []); // Empty dependency array means this effect runs once on mount
// and cleans up on unmount.
return <p>Timer: {seconds} seconds</p>;
}Best Practices & Common Pitfalls:
- Don't call Hooks conditionally: Hooks must be called at the top level of your functional component and not inside loops, conditions, or nested functions.
- Include all dependencies: If your
useEffectuses any variables or functions from the component's scope (props, state, or other functions), make sure to include them in the dependency array. Failing to do so can lead to stale closures and bugs. React will warn you if you miss a dependency. - Memoize functions and objects: If you pass objects or functions as dependencies, and they are re-created on every render (which they often are in JavaScript),
useEffectmight run unnecessarily. UseuseMemofor objects/values anduseCallbackfor functions to memoize them and prevent unnecessary re-renders of effects. - Separate concerns: If you have multiple unrelated side effects, use multiple
useEffectcalls. This makes your code more readable and maintainable.
By mastering
useState for managing local component state and useEffect for handling side effects and component lifecycle, you'll be well-equipped to build dynamic and interactive React applications with functional components.